Javascript 如何根据更改的滑块值和复选框id自动更新图像源？_Javascript_Html

Javascript 如何根据更改的滑块值和复选框id自动更新图像源？

javascript html

Javascript 如何根据更改的滑块值和复选框id自动更新图像源？,javascript,html,Javascript,Html,我是javascript/html新手，如果问题不太清楚，请提前道歉我目前有一个html文件，我想在其中显示一个图像，一旦一个按钮被点击。如果我只是设置了路径，它不会改变，那么这是可行的。我现在要做的是，一旦在我的文件路径中选中了滑块，就使用滑块的值和复选框的id。所以，一旦滑块值改变，复选框被选中，我按下按钮，改变我的图像的来源，图像被更新这是我目前对滑块和复选框的设置： <body> <div class="slidercontainer">

我是javascript/html新手，如果问题不太清楚，请提前道歉

我目前有一个html文件，我想在其中显示一个图像，一旦一个按钮被点击。如果我只是设置了路径，它不会改变，那么这是可行的。我现在要做的是，一旦在我的文件路径中选中了滑块，就使用滑块的值和复选框的id。所以，一旦滑块值改变，复选框被选中，我按下按钮，改变我的图像的来源，图像被更新

这是我目前对滑块和复选框的设置：

<body>
<div class="slidercontainer">
  <input type="range" min="1" max="10" value="1" class="slider" id="sl">
  <p>Epsilon: <span id="sl_demo"></span></p>
</div>

<script>

var slider = document.getElementById("sl");
var output = document.getElementById("sl_demo");
output.innerHTML = slider.value;

slider.oninput = function () {
    output.innerHTML = this.value;
}

var path ="img_"+String(checkbox_id_once_checkbox_clicked)+"_"+String(document.getElementById("sl").value)+".png";

  function myFunction() {
    var checkBox = document.getElementById("mycheckbox");
    var text = document.getElementById("text");
    if (checkBox.checked == true){
      text.style.display = "block";
    } else {
       text.style.display = "none";
    }
  }
</script>
<label for="l2-norm">L2-Norm:</label> 
<input type="checkbox" id="mycheckbox" onclick="myFunction()"><br>
<br>
<button id="btn" onclick= img.src=path type="button">
    Visualize Results</button>

<img id="img">
</body>

我以前有一个解决方案，在slider.oninput函数中访问更改的slider值this.value，但这似乎不是理想的解决方案，尤其是如果我想将其他值从其他滑块传递到文件路径。

我修复了您的代码，但其中有一个不规则；您需要为元素提供id文本，这样就不会出现错误

ε：

var checkbox\u id\u单击一次\u checkbox\u var slider=document.getElementByIdsl； var output=document.getElementByIdsl\u demo； output.innerHTML=slider.value； slider.oninput=函数{ output.innerHTML=this.value； } var path=img_u+复选框_id_单击一次复选框++document.getElementByIdsl.value+.png；函数myFunction{ var checkBox=document.getElementByIdmycheckbox； var text=document.getElementByIdtext；如果checkBox.checked==true{ 复选框\u id\u单击一次\u复选框\u=mycheckbox text.style.display=块； }否则{ 复选框\u id\u单击一次\u复选框\u= text.style.display=无； } } 功能改变{ document.getElementById'img'.src=path } L2规范：可视化结果

此外，你不必把字符串。。。要获取字符串的值，只需输入变量名

我删除了字符串。。。命令和所有包含文本的行，因为我没有实际使用它们，现在我的按钮在单击后调用changeImg函数，但图像始终是相同的，无论我是否更改滑块值，它始终采用我在slidercontainer中设置的初始滑块值。知道可能出了什么问题吗？document.getElementByIdsl.value输出的值似乎与此值不同。值是否需要将myFunction onclick与changeImg一起调用？您不必同时调用它，无论哪种方式，滑块值中的更改都不会影响图像源。。