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

【问题标题】：changing the text of a button using javascript event listener使用 javascript 事件侦听器更改按钮的文本
【发布时间】：2020-11-25 21:24:20
【问题描述】：

我有一个简单的按钮，单击该按钮时，按钮上的文本将使用事件侦听器进行更改。但是，我想在代码中添加一些逻辑，这样当我再次单击它时，它就会返回到原始文本。我对 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>

【问题讨论】：

只需在 textContent 上 if 即可知道将其更改为什么。当然，您需要保留原来的内容才能将其更改回来。这可以通过数据集属性来完成
花括号 { } 用于对语句进行分组。因此，如果您只需要执行 1 条语句，则不需要它们。否则，如果您需要将多个语句与 if....else, for, while, ... 相关联，则必须在这些语句周围添加花括号。

标签： javascript dom button dom-events event-listener

【解决方案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>

【讨论】：

【解决方案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);

&lt;button&gt;Click Me&lt;/button&gt;

【讨论】：

【解决方案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>

【讨论】：

【解决方案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下的语句。

【讨论】：

【解决方案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";
  }
});

&lt;button&gt;Click Me&lt;/button&gt;

【讨论】：