Question

出于某种原因，我很难在点击时尝试更改按钮的内容。这是我的代码：

<!DOCTYPE html>

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Exam 2</title>
</head>
<body>
    <div>
<p>
    <button id="button">Start</button>
    </p></div>
    <p id="result"></p>
    <div><p>
        <img src="turret-portal.jpg" height="150" width="100"/>
        </p></div>

    <script>
var button=document.getElementById("button");
button.onclick = function() {
     button.value = "test";
};    
    </script>
    </body>
</html>

我觉得我从根本上误解了一些东西。

感谢您的帮助

编辑：

这也不起作用：

<!DOCTYPE html>

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Exam 2</title>
</head>
<body>
    <div>
<p>
    <button id="button">Start</button>
    </p></div>
    <p id="result"></p>
    <div><p>
        <img src="turret-portal.jpg" id="pic" height="150" width="100"/>
        </p></div>

    <script>
document.getElementById("button").onclick = function() {
     document.getElementById("button").innerText = "test";
};    
    </script>
    </body>
</html>

Answer 1

您不想更改值属性。您想修改文本内容。

因此，您可以将button.value = "test";替换为button.innerText = "test";。

此外，您可以更改button元素中文本节点的数据，如this other answer中所述。

Answer 2

将您的javascript更改为：

var button=document.getElementById("button");
button.onclick = function() {
    button.innerHTML = "test";
};

如果是.value，您可以使用<input type=button/>

这是工作小提琴：https://jsfiddle.net/q0g8c78q/

单击时更改按钮的内容

2 个答案: