Getting values from multiple HTML sliders

Question

I'm looking for a way to grab the values of 2 HTML sliders and append them to a url (which would then be used to change an image source).

This is what I'm currently working with:

    var localhost = "http://localhost:8080";
    var chemin = "/cam_pre/";
    var zoom_val = document.getElementById("zoom_val").value;
    document.getElementById("zoom_val").innerHTML=zoom_val;
    var rot_val = document.getElementById("rot_val").value;
    document.getElementById("rot_val").innerHTML=rot_val;
    document.getElementById("img").src =localhost+chemin+"camera_"+zoom_val+"_"+rot_val+ ".png";
    function showzoom(newVal){
          document.getElementById("zoom_val").innerHTML=newVal;
          document.getElementById("img").src = document.getElementById("img").src = localhost+chemin+"camera_"+newVal+"_"+rot_val+ ".png";
        }
    function showrot(newVal){
          document.getElementById("rot_val").innerHTML=newVal;
          document.getElementById("img").src = localhost+chemin+"camera_"+zoom_val+"_"+newVal+ ".png";
        }

<figure>
        <img id="img" alt="" src="http://localhost:8080/service/camera_init.png">
      </figure>
    <form action="/service" method="GET">
      <fieldset>
         <legend>Gérez les paraméttres de la caméra:</legend>
           <label for="zoom_val">Zoom:</label>
            Loin <input type="range" name="zoom_val" id="zoom_val" min="0.5" max="2" step="0.5" oninput="showzoom(this.value)" onchange="showzoom(this.value)"> Proche<br>
           <label for="rot_val">Rotation:</label>
            0 <input type="range" name="rot_val" id="rot_val" min="0" max="1.5" step="0.5" oninput="showrot(this.value)" onchange="showrot(this.value)"> Pi/2<br>
    </fieldset>
    </form>

I'm completely new to HTML and Javascript so please be patient =).

Answer 1

Your <script> tag should be at the end of your HTML file. Since your javascript is not wrapped in a function its going to immediately get the values from your sliders and update the image source. (This could be what you want im not sure)

Then when each slider changes you call a function which updates the link. I dont think you need the oninput="showzoom(this.value)" but you definitely need the onchange() event.

Also in the showZoom() function you have this line

document.getElementById("img").src = document.getElementById("img").src = localhost+chemin+"camera_"+newVal+"_"+rot_val+ ".png";;

which should be

document.getElementById("img").src = localhost + chemin + "camera_" + newVal + "_" + rot_val + ".png";

This final JS script is working fine for me:

<script>
    var localhost = "http://localhost:8080";
    var chemin = "/cam_pre/";
    var zoom_val = document.getElementById("zoom_val").value;
    var rot_val = document.getElementById("rot_val").value;

    document.getElementById("img").src =localhost+chemin+"camera_"+zoom_val+"_"+rot_val+ ".png";

    console.log(zoom_val, rot_val);

    function showzoom(newVal) {
          document.getElementById("zoom_val").innerHTML = newVal;
          document.getElementById("img").src = localhost + chemin + "camera_" + newVal + "_" + rot_val + ".png";

          console.log(document.getElementById("img").src);
    }

    function showrot(newVal) {
          document.getElementById("rot_val").innerHTML=newVal;
          document.getElementById("img").src = localhost + chemin + "camera_" + zoom_val + "_" + newVal + ".png";
          console.log(document.getElementById("img").src);
    }
</script>

Answer 2

JavaScript to get value of an input by ID

document.getElementById('ID').value;

JavaScript to append an input value with a given ID to a string

myVar = "string" + document.getElementById('ID').value;

JavaScript to change image element source attribute given an ID

document.getElementById("imageID").src="/newImageSource.png";