如何使用 JavaScript 在单击时更改按钮文本？答案

【问题标题】：How to change button text on click using JavaScript?如何使用 JavaScript 在单击时更改按钮文本？
【发布时间】：2015-04-21 15:36:25
【问题描述】：

几天前才开始使用 JS，我已经在切换开关时遇到了一些麻烦。我希望按钮在单击时在on 和off 之间切换。

function click() {
  var change = document.getElementById("toggle");
  if (change.innerHTML == "on"); {
    change.innerHTML = "off";
  } else {
    change.innerHTML = "on";
  }
}

&lt;button type="button" id="toggle" onClick="click()"&gt;on&lt;/button&gt;

我应该这样做吗？

【问题讨论】：

有效吗？如果不是，它有什么问题（准确地说）？你只是想要风格建议吗？
你的 if 表达式在 == "on") 之后不应有分号
@JeffreyBosboom 不幸的是，它根本不起作用！我只是想知道为什么会这样。我想我可能遗漏了一些人可以发现的东西
如果你打开你的控制台，你会看到一个语法错误，很可能是else。你打开控制台了吗？你知道如何打开控制台吗？你应该在做任何其他事情之前了解这一点。
@torazaburo 谢谢，我去查一下

标签： javascript html

【解决方案1】：

试试这个

<!DOCTYPE html>
<html>
    <body>

        <button id="toggle" onclick="myFunction()">on</button>

        <script>

            function myFunction() {
                var change = document.getElementById("toggle");
                if (change.innerHTML == "on")
                {
                    change.innerHTML = "off";
                }
                else {
                    change.innerHTML = "on";
                }
            }

        </script>
    </body>
</html>

定义你的函数是独一无二的并且不使用javascript函数/保留词只是一个建议/建议

【讨论】：

【解决方案2】：

你的if语句有误，if语句后面没有分号编写如下代码

 <button name="toggle" id="toggle" onclick="myFunction()">on</button>

            <script>

                function myFunction() {
                    var change = document.getElementById("toggle");
                    if (change.innerHTML == "on")
                    {
                        change.innerHTML = "off";
                    }
                    else {
                        change.innerHTML = "on";
                    }
                }

            </script>

【讨论】：

【解决方案3】：

你可以这样做：

<button type = "button" id= "toggle" onClick = "click()">on</button>


function click()
{
    var change = document.getElementById("toggle");
    if (change.value == "on")
    {
        change.value = "off";
    }
    else 
    {
      change.value = "on";
    }
}

或通过这样做：

function click()
{
    if (this.value=="on")
    {
        this.value = "off";
    }
    else 
    {
         this.value = "on";
    }
}

【讨论】：

您在第一个 if 语句之后留下了虚假的分号，这将导致解析器阻塞。
啊，是的，你是对的 - 我已经更正了 - 只是一个错字！

【解决方案4】：

它会为你工作

function myFunction()
    {
        var change = document.getElementById("toggle");
        if (change.value=="off") change.value = "on";
        else change.value = "off";
    }

按钮

<input type="button" value="on" id="toggle" onclick="myFunction()">

【讨论】：