使用 javascript 每次单击更改按钮内的文本？

Question

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

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>

我不明白为什么当我尝试使用 google chrome 加载页面时此代码不起作用。然而，当我将它加载到 codepen 时它起作用了

Answer 1

它期望你有这样的结构：

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

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

Answer 2

您的代码可以正常工作，但您的方法不是很好。请参阅下面的 2 个选项。

let text = {
 'Hide': 'Show',
 'Show': 'Hide'
}

const click = (event) => {
  // option 1, it needs the object above.
  // It's good for multiple alternatiosn like color, icon etc
  // or multiple states like hide to show, show to sure, sure to really, really to hide. 
  event.target.innerText = text[event.target.innerText];
  
  // option 2, it's good for one or two alternations.
  // event.target.innerText = event.target.innerText == 'Hide' ? 'Show' : 'Hide'
}

document.querySelector('button').addEventListener('click', click);

<button>Show</button>

Answer 3

您可以通过删除自定义属性使它更简单，并通过使用 Object.freeze() 仅将按钮 innerHTML 与枚举一起使用，这将使代码更具可读性

const titleEnum = Object.freeze({show: "SHOW",  hide: "HIDE"});
var button = document.getElementById("changeText");
button.addEventListener(
    "click",
    function () {
        if (button.innerHTML === titleEnum.hide) {
            button.innerHTML = titleEnum.show;
        } else {
            button.innerHTML = titleEnum.hide;
        }
    },
    false
);

<!DOCTYPE html>  
<html>
    <head>
        <title>
              
        </title>
    </head>
      
    <body>
        <div>
            <button id="changeText">HIDE</button>
        </div>
    </body>
</html>

Answer 4

使用innerText获取元素的值

const changeBtn = document.getElementById("changeText");
changeBtn.addEventListener("click", ()=>{
    if(changeBtn.innerText === "2"){
        changeBtn.innerText = "1";
    }
    else{
        changeBtn.innerText= "2";
    }
});

<div>
    <button id="changeText">1</button>
</div>

使用 javascript 每次单击更改按钮内的文本？

Change text inside a button on each click using javascript?

javascript

onclick