问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

如何使用JS单击改变button按钮的文本，再单击还原？

头像
Muze
    212
    新手上路，请多包涵

    有这样一段代码：

    <button onclick="myFunction_two()" class="muze-button" >
  one
</button>

    希望单击这个按钮，按钮的文本变为two,再单击下，变成one.麻烦各位发一个简单的例子参考参考

    javascripthtml5前端css3
    阅读 6k
    4 个回答
    得票最新
    头像
    码谱
      5215

      先给 button 加个 id (例如id为 mybtn)，然后模拟 toggle行为。
      原生js代码如下：

      <body>
<button onclick="myFunction_two()" class="muze-button" id="mybtn">one</button>
</body>
<script>
    function myFunction_two(){
        var one = document.getElementById('mybtn').innerHTML;
        if(one === "one"){
            document.getElementById('mybtn').innerHTML = "two";
        }else {
            document.getElementById('mybtn').innerHTML = "one";
        }
    }
</script>

      如果用jquery的话，toggle()函数代码更简洁。

      头像
      caogu
        584

        简单的例子：

        <body>
  <button id="button">one</button>

  <script>
    const btn = document.getElementById('button')
    btn.addEventListener('click', () => {
      btn.innerText === 'one' ? btn.innerText = 'two' : btn.innerText = 'one'
    })
  </script>
</body>
        头像
        voggen
          1.2k53463

          设置一个开关变量

          var flag = false;
function myFunction_two() {
    if(!flag) {
        document.querySelector(".muze-button").innerHTML = "two";
        flag = true
    } else {
        document.querySelector(".muze-button").innerHTML = "one";
        flag = false
    }
}
          头像
          唯一丶
            23.1k103743

            交换值

            <button onclick="myFunction_two(this)" class="muze-button" data-text="two">
    one
</button>

<script>
    function myFunction_two(element) {
        var text = element.dataset.text;
        var innerText = element.innerText;
        element.dataset.text = innerText;
        element.innerText = text;
    }
</script>
            撰写回答
            你尚未登录，登录后可以
            • 和开发者交流问题的细节
            • 关注并接收问题和回答的更新提醒
            • 参与内容的编辑和改进，让解决方法与时俱进
            推荐问题