Question

调用函数时无法将属性“innerHTML”设置为 null

2020-01-25

240

javascript

我正在使用以下代码：

function getData2() {
  var x = document.getElementById("sellSnet").value;
  var p = x * 0.1;
  var c = x - p;
  document.getElementById("agireceive").innerHTML = c;
};

html 是这样的

<input type="number" id="sellSnet" class="form-control" oninput="getData2()">

这给了我这个错误

Uncaught TypeError: Cannot set property 'innerHTML' of null at getData2 (exchange.js:151) at HTMLInputElement.oninput (VM18589 :399)

现在有趣的是，我在代码中使用了完全相同的函数工作代码：

function getData() {
  var a = document.getElementById("amount").value;
  var b = a * 0.1;
  var c = a - b;
  document.getElementById("receive").innerHTML = c;
};

<input type="number" id="amount" class="form-control" value="" oninput="getData();">

它运行起来没有问题，那么我在这里做错了什么？

Answer 1

HTML DOM innerHTML 属性用于更改元素的 html 内容。在您的例子中，您有一个使用 value 属性显示文本的输入元素。因此您应该使用该属性来设置值。

 function getData2() {
        console.log("some");
        var x = document.getElementById("sellSnet").value;
        var p = x * 0.1;
        var c = x - p;
        document.getElementById("agireceive").value = c;
    }


    <input type="number" id="sellSnet" class="form-control" oninput="getData2()">
    <input type="number" id="agireceive" class="form-control" >

Answer 2

未捕获的 TypeError：无法将属性“innerHTML”设置为 null

当执行 javascript 函数时目标元素不可用时，会抛出此错误。

上述问题可以通过 2 种方式修复：

确保在执行 javascript 函数之前定义目标元素 “agireceive” 。

或

作为最佳实践，请在页面底部包含 javascript 函数。这将确保只有在加载所有 html 元素后才会加载任何 javascript。这也会提高页面加载速度。