使用 javascript 事件侦听器更改按钮的文本

Question

我有一个简单的按钮，单击该按钮时，按钮上的文本将使用事件侦听器更改。但是，我想在代码中添加一些逻辑，以便当我再次单击它时它会返回到原始文本。我是 javascript 的新手，正在努力提高自己的技能。

<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Event Listeners JS</title>
 </head>

 <body>
   <button>Click Me</button>

   <script>
     document.querySelector("button").addEventListener("click", (e) => {
       e.target.textContent = "I was clicked"; //Changes click me to I was
     });
   </script>
 </body>
</html>

Answer 1

正如@Taplar 建议的那样：

编辑：为了使它更清晰，您可以单行 if 语句：

document.querySelector("button").addEventListener("click", (e) => {

    (e.target.textContent === 'Click Me') ? e.target.textContent = "I was clicked" : e.target.textContent = "Click Me"

});

没有单行 if 语句的旧答案：

<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Event Listeners JS</title>
 </head>

 <body>
   <button>Click Me</button>

   <script>
     document.querySelector("button").addEventListener("click", (e) => {
       //checking the text content in the button if its Click Me
       if(e.target.textContent === 'Click Me'){
       e.target.textContent = "I was clicked"; //Changes click me to I was
         //if its not Click Me it will change back to Click Me
         } else {
           e.target.textContent = "Click Me"; //change back to Click Me
         }
     });
   </script>
 </body>
</html>

Answer 2

如果你想要一个更动态的解决方案（处理程序中没有硬编码值，它会自动跟踪原始文本是什么），你可以这样做：

const toggleTextOnClick = (text, el) => {
    let originalText = el.textContent;
    el.addEventListener("click", (e) => {
        e.target.textContent = text;
        [originalText, text] = [text, originalText];
    })
}

const btn = document.querySelector("button");
toggleTextOnClick("I was clicked", btn);

<button>Click Me</button>

Answer 3

思路是这样的：

     document.querySelector("button").addEventListener("click", (e) => {
        let textContent = e.target.textContent;
        if (textContent == "Click Me") {
            e.target.textContent = "I was clicked";
         }
         else {
           e.target.textContent = "Click Me";

         }
     });

<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Event Listeners JS</title>
 </head>

 <body>
   <button>Click Me</button>

 </body>
</html>

Answer 4

查看此代码：

<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Event Listeners JS</title>
 </head>

 <body>
   <button>Click Me</button>

   <script>
     document.querySelector("button").addEventListener("click", (e) => {
        if(e.target.textContent == "Click Me")
            e.target.textContent = "I was clicked"; //Changes click me to I was
        else
            e.target.textContent = "Click Me"; //Changes click me to I was
     });
   </script>
 </body>
</html>

我添加了 if...else 块。现在如果按钮的文本是 Click Me，则执行 if 下的语句，否则执行 else 下的语句。

Answer 5

document.querySelector("button").addEventListener("click", (e) => {
    let last = e.target.last;
    if (last) {
    e.target.last = e.target.textContent;
    e.target.textContent = last;
  } else {
    e.target.last = e.target.textContent;
    e.target.textContent = "I was clicked";
  }
});

<button>Click Me</button>

使用 javascript 事件侦听器更改按钮的文本

changing the text of a button using javascript event listener

javascript

dom

button

event-listener

dom-events