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

Question

我正在尝试获取它，以便每次点击随机按钮时，都会显示一个新 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";

}

Answer 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>

Answer 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>