为什么我的 onclick 函数没有改变 innerHTML？

Question

我是 Javascript 的初学者，我正在尝试创建一个网站，上面有一些问题供人们填写。

所以现在，我有类似的东西：

<head>
    <script>
        function wrong(self) {
            self.innerHTML = "Wrong :(";
        }
        function right(self) {
            self.innerHTML = "Right!";
        }
    </script>
</head>
<body>
    Who is the better team?: <br>
    <input type="checkbox" name = "q1" value="Celtics" onclick="wrong(this)">Celtics<br><br>
    <input type="checkbox" name = "q1" value="Lakers" onclick="right(this)">Lakers<br><br>
</body>

但是，当我实际创建带有复选框的页面时，当我单击任一复选框时，右侧的文本不会发生变化。我也尝试过将类型更改为“按钮”，但它的 innerHTML 也没有更改。

我看到一些以前的回答说我可能试图在加载元素之前更改某些内容。但是，如果我使用所述元素内的“onclick”属性调用该函数，那么我相信它必须在调用时加载。

感谢您的帮助！

Answer 1

输入不能有子项。他们就像 <img>s。 Celtics 和 Lakers 存在于单独的文本节点（不是子节点）中。分配给输入的 innerHTML 什么都不做。

将文本放入它们自己的独立元素中，然后您就可以更改它们的文本。

function wrong(self) {
  self.nextElementSibling.textContent = "Wrong :(";
}

function right(self) {
  self.nextElementSibling.textContent = "Right!";
}

Who is the better team?: <br>
<input type="checkbox" name="q1" value="Celtics" onclick="wrong(this)">
<div>Celtics</div>
<input type="checkbox" name="q1" value="Lakers" onclick="right(this)">
<div>Lakers</div>

（虽然在技术上可以 select 并更改原始 HTML 中的文本节点，但要更改元素而不是文本节点通常更有意义）

为什么我的 onclick 函数没有改变 innerHTML？

Why is my function from onlick not changing the innerHTML?

html

javascript

attributes