单击时更改按钮的内容答案

【问题标题】：Changing contents of button when clicked单击时更改按钮的内容
【发布时间】：2015-07-22 02:12:30
【问题描述】：

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

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

【问题讨论】：

那么：会发生什么？你期望会发生什么？（看起来你正在设置 button.value ...我希望你想做一些类似 var resultP = document.getElementById("result"); 然后设置例如 resultP 的 innerHtml 为“test ")

标签： javascript html

【解决方案1】：

将您的 javascript 更改为：

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

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

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

【讨论】：

谢谢，我正在尝试让按钮在值之间来回切换。这是我的尝试：jsfiddle.net/q0g8c78q/1
我无法让 javascript 中的布尔变量像我想要的那样来回移动
你有innerHtml 而不是innerHTML（注意大写的HTML）。这是您想要的工作小提琴：jsfiddle.net/32gfodkr/1

【解决方案2】：

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

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

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

【讨论】：

innerHTML 是你的意思，因为 innerText 不起作用
@CarlGanz innerText 应该也可以。这是一个工作箱jsbin.com/xugisetewu/edit?html,output。如果您只插入文本内容，例如test，则应使用innerText。如果您想将 HTML 设置为内容，则可以使用 innerHTML，例如 <b>test</b>。