Javascript：未捕获的 TypeError：无法在 HTMLButtonElement.but.onclick 处设置属性“innerHTML”为空（

Posted 2023-05-07

【中文标题】Javascript：未捕获的 TypeError：无法在 HTMLButtonElement.but.onclick 处设置属性“innerHTML”为空（

【英文标题】：Javascript: Uncaught TypeError: Cannot set property 'innerHTML' of null at HTMLButtonElement.but.onclick (

【发布时间】：2017-10-29 14:54:32

【问题描述】：

我正在尝试获取它，以便每次点击随机按钮时，都会显示一个新 div 的内部 html - 但是我在 javascript 控制台中收到错误消息“无法设置属性”。有人可以解释这意味着什么以及我正在做什么来导致它吗？

<h1>Test</h1>

<div id="quote1">this is quote number 1</div>

<p id="quote 2">this is quote number 2</p>

<div id="quote 3">this is quote number 3</div>

<button id="button1">Randomise</button>



<script type="text/javascript">

var but = document.getElementById('button1');
but.onclick = function() 
document.getElementById("quote1").innerHTML = "hi";
document.getElementById("quote2").innerHTML =  "ho";

【问题讨论】：

Cannot set property 'innerHTML' of null的可能重复

【参考方案1】：

那是因为 id 是 quote 2 而不是 quote2 即您在 quote 2 和 quote 3 之间有额外的空间

改成

<p id="quote2">this is quote number 2</p>

<h1>Test</h1>

<div id="quote1">this is quote number 1</div>

<p id="quote2">this is quote number 2</p>

<div id="quote3">this is quote number 3</div>

<button id="button1">Randomise</button>



<script type="text/javascript">

var but = document.getElementById('button1');
but.onclick = function() 
document.getElementById("quote1").innerHTML = "hi";
document.getElementById("quote2").innerHTML =  "ho";

 
</script>

【参考方案2】：

您的 id 设置为“quote 2”，但您将其引用为“quote2”。它显示“无法设置属性”，因为它找不到任何引用为“quote2”的元素。将您的 id 更改为“quote2”。和“quote3”一样 这应该工作

<h1>Test</h1>

<div id="quote1">this is quote number 1</div>

<p id="quote2">this is quote number 2</p>

<div id="quote3">this is quote number 3</div>

<button id="button1">Randomise</button>



<script type="text/javascript">

    var but = document.getElementById('button1');
    but.onclick = function() 
            document.getElementById("quote1").innerHTML = "hi";
            document.getElementById("quote2").innerHTML =  "ho";

        
    </script>

【讨论】：

谢谢！我怎么忽略了我不知道啊。

没问题。下次只需按照您的代码流程进行操作即可。