使用range slider调整div高度时出现异常，请求技术帮助

我帮你找到了问题所在，这两个小错误导致滑块的变化没被正确识别：

问题1：滑块值只初始化了一次 #

你在代码最开头就获取了heightR的值：

var heightR = document.getElementById("heightR").value;

这行代码只会在页面加载时执行一次，拿到滑块的初始值（1），之后滑块移动时，heightR并不会自动更新为最新的滑块值，所以每次调用changeH()时，用的还是最开始的那个固定值。

问题2：条件判断用了赋值运算符而非比较运算符 #

在changeH()的if语句里，你写的是if (heightR = 1)，这里的=是赋值运算符——它会把1赋值给heightR，然后整个表达式的结果是1（属于真值），所以每次都会直接进入第一个分支，把div高度设为100px。正确的写法应该用比较运算符===（严格相等，推荐使用）或者==。

修正后的代码 #

JavaScript部分 #

var details = document.getElementById("details");

function changeH() {
  // 每次调用函数时获取最新的滑块值，并转为数字类型（input的value默认是字符串）
  var heightR = parseInt(document.getElementById("heightR").value);
  
  if (heightR === 1) {
    details.style.height = "100px";
  } else if (heightR === 2) {
    details.style.height = "200px";
  } else if (heightR === 3) {
    details.style.height = "300px";
  } else {
    console.log("Less than 1, higher than 3 or NaN");
  }
}

HTML部分（input标签无需闭合，保持原有逻辑即可） #

<div id="generator">
  <input id="heightR" type="range" min="1" max="3" value="1" onchange="heightD.value=value;changeH();">
  <output id="heightD">1</output>
  <div id="details" style="border: solid 1px black"><p>Content</p></div>
  <br />
</div>

额外优化建议 #

如果你的滑块值和高度是线性关系（值×100px），可以简化代码，不用写多个if-else分支：

function changeH() {
  var heightR = parseInt(document.getElementById("heightR").value);
  if (heightR >= 1 && heightR <= 3) {
    details.style.height = `${heightR * 100}px`;
  } else {
    console.log("Less than 1, higher than 3 or NaN");
  }
}

这样以后调整滑块范围（比如把max设为5）时，代码不需要额外修改，更灵活。

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