如何使用JS将两个输入框的求和结果赋值给range滑块调整其取值

问题原因 #

你的代码存在两个核心问题导致赋值不生效：

• 表单内的按钮默认是提交类型，点击后会触发表单提交、页面刷新，刚执行的赋值逻辑会被刷新重置
• 求和后赋值给r的逻辑错误：console.log()仅用于控制台打印，本身没有返回值，所以parseInt(console.log(x + c))得到的是NaN，自然无法正常赋值给range组件

修复方案 #

修改后的完整代码如下：

JS代码

function ra() {
  var a = document.getElementById('ss');
  a.style.display = a.style.display === "none" ? "block" : "none";
}

function ss() {
  // 取值同时加非空兜底，避免空输入得到NaN
  var x = parseInt(document.getElementById("myText").value) || 0;
  var c = parseInt(document.getElementById("my").value) || 0;
  // 直接求和即可，调试打印可以单独写console.log(r)
  var r = x + c;
  document.getElementById("ran").value = r;
}

HTML代码

<form>
  <input type="checkbox" name="ABA" onclick="ra()" value="Applied Behaviour Analysis">Applied Behaviour Analysis
  <div id="ss" style="display: none;">
    <input type="number" id="myText" value="">
    <input type="number" id="my" value="">
    <!-- 给按钮加type="button"，阻止默认表单提交行为 -->
    <button type="button" onclick="ss()">calculate</button>
    <!-- 可根据实际需求调整range的min、max范围，默认范围是0-100 -->
    <input type="range" id="ran" min="0" max="200" value="0">
  </div>
</form>

CSS代码（无改动）

body {
  background-color: black;
  color: white;
}

内容的提问来源于stack exchange，提问作者SushantUniversity