Question

我正在尝试使用按钮更改段落标记的文本，并且我想测试不同的样式标记将如何影响该更改。我的HTML看起来像这样：

<p id="testParagraph"> This <strong> is </strong> a test </p>
<button id="button">Run Test</button>

在我的js文件中，我正在通过其id抓取该标记，并试图像这样设置其内部html：

var button = document.getElementById("button");
button.onclick = function() {
    document.getElementById("testParagraph").innerHtml = "I changed the inner html, but what do I look like?";
}

当我点击按钮时，我没有看到任何变化，我想知道这是否是由于我做错了，或者由于原始段落标签中的强标签而导致更改html时出现问题

Answer 1

innerHTML而非innerHtml

var button = document.getElementById("button");
button.onclick = function() {
    document.getElementById("testParagraph").innerHTML = "I changed the inner html, but what do I look like?";
}

演示：http://jsfiddle.net/shseqy0t/

Answer 2

它是.innerHTML，而不是.innerHtml。套管在JavaScript中很重要。

不多说。一个简单的错字 - 继续！

修改
由于我们有两个完全相同的答案，我想我会给脚本提供另一种解决方案。

您可以使用addEventListener，其好处是您可以将多个事件附加到同一元素（与直接onclick相对）。这不是一个建议，只是提到它是另一种选择。使用你喜欢的任何东西。

document.getElementById("button").addEventListener('click', function() { document.getElementById("testParagraph").innerHTML = "I changed the inner html, but what do I look like?"; });

<p id="testParagraph"> This <strong> is </strong> a test </p> <button id="button">Run Test</button>

如何改变内部html响应？

2 个答案: