Question

我尝试使用此代码更改按钮的文字，但我没有得到任何反应。这应该是好的，看看我读过的所有内容 - 但它并没有改变文本。 我在这里做错了什么？

<!DOCTYPE html>
<html>
<head>
    <script>
        function changeText() {
            document.getElementById('myButton').value = "New value";
        }
    </script>
</head>
<body>
    <button id="myButton" onclick="changeText()">Change my text!</button>
</body>
</html>

Answer 1

您需要设置'innerHTML'属性：

function changeText() {
    document.getElementById('myButton').innerHTML= "New value";
}

您可以在按钮上指定一个值，但不经常使用它。在您的情况下，您希望更改按钮的文本。因此，innnerHTML是你的朋友。有关详细信息，请参阅this page。

另请注意，您也可以在IE中使用“innerText”，但Firefox不支持它（也可能不支持其他一些）。 'textContent'也可以是一个选项，但旧版浏览器不支持（在2011年之前）。所以innerHTML是最安全的选择。

Answer 2

按钮可以有一个值，但显示的是按钮内部的HTML，这是您想要更改的内容。更好地使用innerHTML：

function changeText() {
    document.getElementById('myButton').innerHTML = "New value";
}

无法更改HTML和JavaScript中的按钮文字

2 个答案: