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

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

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

1 个答案: