从多个 HTML 滑块获取值

Question

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

这是我目前正在使用的：

    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>

我是 HTML 和 Javascript 的新手，所以请耐心等待 =)。

Answer 1

JavaScript 通过 ID

获取输入值

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 未包含在函数中，因此它会立即从您的滑块获取值并更新图像源。（这可能是你想要的我不确定）

然后，当每个滑块发生变化时，您调用一个函数来更新 link。我认为您不需要 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 滑块获取值

Getting values from multiple HTML sliders

html

javascript

url

sliders