Question

我正在寻找一种方法来获取2个HTML滑块的值并将它们附加到网址（然后用于更改图像源）。

这就是我目前正在使用的内容：

＆＃13;

    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";
        }

＆＃13;

<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>

＆＃13;

我对HTML和Javascript完全陌生，所以请耐心等待=）。

Answer 1

通过ID获取输入值的JavaScript

document.getElementById('ID').value;

JavaScript将具有给定ID的输入值附加到字符串

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

JavaScript以更改ID

的图像元素源属性

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

Answer 2

您的<script>标记应位于HTML文件的末尾。由于您的javascript未包含在函数中，因此它会立即从滑块中获取值并更新图像源。（这可能是你想要的，我不确定）

然后当每个滑块改变时，调用一个更新链接的函数。我不认为你需要oninput="showzoom(this.value)"，但你肯定需要onchange（）事件。

同样在showZoom()函数中你有这一行

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

应该是

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

这个最终的JS脚本对我来说很好用：

<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>

从多个HTML滑块获取值

2 个答案: