logo标签列表

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

javascripthtml
4

我几天前才开始学习JS，但是我在尝试制作一个切换按钮时遇到了一些问题。我希望这个按钮能够在点击时在“on”和“off”之间进行切换。

function click() {
  var change = document.getElementById("toggle");
  if (change.innerHTML == "on"); {
    change.innerHTML = "off";
  } else {
    change.innerHTML = "on";
  }
}
<button type="button" id="toggle" onClick="click()">on</button>

这是我应该如何处理它吗？

它能运行吗？如果不能，出了什么问题（请具体说明）？您只需要样式建议吗？ - Jeffrey Bosboom
3
你的if语句中，在== "on")之后不应该加分号。 - Jagtesh Chadha
@JeffreyBosboom，非常不幸，它根本不起作用！我只是想知道可能的原因。我认为我可能会漏掉一些别人能够发现的东西。 - elmo330
如果你打开控制台，你会看到一个语法错误，很可能是在 else 上。你是否打开了控制台？你知道怎么打开控制台吗？在你做其他任何事情之前，你应该学会如何打开控制台。 - user663031
@torazaburo 谢谢，我会查阅的。 - elmo330
尝试按下F12键，一个全新的调试世界等待着你。 - user663031
4个回答
4

试试这个

<!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函数/保留字。这只是一个建议。

1
你的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>
0
你可以这样做：
<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";
    }
}
1
你在第一个 if 语句后面留下了多余的分号，这会导致解析器出错。 - user663031
啊，是的，你说得对 - 我已经纠正了它 - 只是一个打字错误！ - TResponse
0

这对你会起作用

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()">
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接