nicht angemeldet
So klappt das jetzt! Zur Demo sende ich Slider-Werte nicht an den Server sondern gebe sie auf der HTML-Seite aus. Den "Durchbruch" hat das Script-Teil //Slider to String gebracht!
Vielen Dank nochmal an alle Helfer und vorallem die GEDULD die ihr aufgebracht habt!
Grüße Alois
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
label {font-weight:bold;}
output {font-weight:bold;text-align: center;}
input {text-align: center;}
.slidecontainer {
width: 300px;
margin-left: auto !important;
margin-right: auto !important;}
</style>
</head>
<body>
<div class=slidecontainer>
<p><strong>Fußpunkt:<strong></p>
<input type="range" id="fpIn" min="-20" max="0" value="-15">
<output></output> °C <hr><br>
<p><strong>Steigung:<strong></p>
<input type="range" id="stIn" min="-.8" max="-.2" value="-0.5" step="0.01">
<output aria-hidden="true"></output> R/A<hr><br>
<p><strong>von Wind:<strong></p>
<input type="range" id="wiIn" min="0" max="6" value="2" step="0.5">
<output aria-hidden="true"></output> %<hr><br>
<p><strong>von Licht:<strong></p>
<input type="range" id="liIn" min="0" max="6" value="3" step="0.5">
<output aria-hidden="true"></output> %<hr><br>
<button id="update-server">Werte senden</button>
<output id=Out></output>
</div>
<script>
// Slider ---------------------------------------------------------
const sliderFp = document.querySelector("#fpIn");
const sliderFpOut = document.querySelector("#fpIn + output");
sliderFp.addEventListener("input", function() {
sliderFpOut.textContent = sliderFp.value; });
sliderFpOut.textContent = sliderFp.value;
const sliderSt = document.querySelector("#stIn");
const sliderStOut = document.querySelector("#stIn + output");
sliderSt.addEventListener("input", function() {
sliderStOut.textContent = sliderSt.value; });
sliderStOut.textContent = sliderSt.value;
const sliderWi = document.querySelector("#wiIn");
const sliderWiOut = document.querySelector("#wiIn + output");
sliderWi.addEventListener("input", function() {
sliderWiOut.textContent = sliderWi.value; });
sliderWiOut.textContent = sliderWi.value;
const sliderLi = document.querySelector("#liIn");
const sliderLiOut = document.querySelector("#liIn + output");
sliderLi.addEventListener("input", function() {
sliderLiOut.textContent = sliderLi.value; });
sliderLiOut.textContent = sliderLi.value;
//Slider to String ---------------------------------------------
document
.getElementById("update-server")
.addEventListener(
"click",
event => {
let myString = [];
// alle Slider finden
document
.querySelectorAll('input[type="range"]')
.forEach(slider => {
// String mit Slider-Wert erweitern
myString.push(slider.name + "&" + slider.value); });
// POSTe alle Teilstrings in `myString` an den Server
strOut = myString+"#";
document.getElementById("Out").innerHTML = strOut; });
</script>
</body>
</html>
Rolf B
Der Martin