Question

尝试在JS中编写一个简单的均衡器，其中用户使用滑块控制maxRadius，但我不断收到此错误

未捕获的TypeError：无法设置属性＆＃39; onchange＆＃39; null。

这是我的功能：

maxRadius是声明的全局变量。

Plot

这是我的HTML

 document.querySelector("#slider1").onchange = function(e) {
   console.log("value=" + e.target.value);
   document.querySelector("#sliderResults").innerHTML = e.target.value;
   maxRadius = e.target.value * 500;
 };

Answer 1

您只需确保文档准备就绪

试试这个

function fn() {

  document.querySelector("#slider1").onchange = function(e) {
    console.log("value=" + e.target.value);
    document.querySelector("#sliderResults").innerHTML = e.target.value;
    maxRadius = e.target.value * 500;
  };

}

document.onreadystatechange = function() {
  if (document.readyState === 'complete') {
    fn();
  }
};

＆＃13;

function fn() {

  document.querySelector("#slider1").onchange = function(e) {
    console.log("value=" + e.target.value);
    document.querySelector("#sliderResults").innerHTML = e.target.value;
    maxRadius = e.target.value * 500;
  };

}

document.onreadystatechange = function() {
  if (document.readyState === 'complete') {
    fn();
  }
};

＆＃13;

<div>
  <label for="slider1">Circle Size</label>
  <input id="slider1" type="range" min="0.1" max="1.0" step="0.1" value="0.5" />
  <span style="float:right" id="sliderResults"></span>
</div>

＆＃13;

Answer 2

试试这个

document.getElementById("slider1").onchange = function(e)
        {
            console.log("value=" + e.target.value);
            document.querySelector("#sliderResults").innerHTML = e.target.value;
            maxRadius = e.target.value * 500;
        };

未捕获的TypeError：无法设置属性＆＃39; onchange＆＃39; null Javascript

2 个答案: