Alois: Slider to JS variable

Beitrag lesen

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>