时间戳

首页 > 解决方案 > 使用javascript在每次点击时更改按钮内的文本？

javascript - 使用javascript在每次点击时更改按钮内的文本？

问题描述

每次单击按钮时，我都需要更改文本。

var button = document.getElementById("changeText");
button.addEventListener(
"click",
function () {
    if (button.getAttribute("data-text") == button.innerHTML) {
        button.innerHTML = button.getAttribute("data-text1");
    } else {
        button.setAttribute("data-text1", button.innerHTML);
        button.innerHTML = button.getAttribute("data-text");
    }
},
false
);
<div>
<button id="changeText" data-text="Show" data-text1="Hide">Hide</button>
</div>

我不明白为什么当我尝试使用谷歌浏览器加载页面时这段代码不起作用。但是，当我将它加载到 codepen 时，它起作用了

标签： javascriptonclick

解决方案

它期望你有这样的结构：

<!DOCTYPE html>  
<html>
    <head>
        <title>
              
        </title>
    </head>
      
    <body>
        <div>
            <button id="changeText" text="Show" >Hide</button>
        </div>

        <script>
            var button = document.getElementById("changeText");
button.addEventListener(
    "click",
    function () {
        if (button.getAttribute("text") == button.innerHTML) {
            button.innerHTML = button.getAttribute("text1");
        } else {
            button.setAttribute("text1", button.innerHTML);
            button.innerHTML = button.getAttribute("text");
        }
    },
    false
);
        </script>
    </body>
</html>

将其复制粘贴到您的文件中，您会看到它有效。如果它解决了您的问题，请将其标记为答案:)

推荐阅读