изменение текста кнопки с помощью прослушивателя событий javascript - PullRequest
Новая
       126

изменение текста кнопки с помощью прослушивателя событий javascript

2 голосов
/ 05 августа 2020

У меня есть простая кнопка, при нажатии на которую текст на кнопке изменяется с использованием прослушивателя событий. Однако я хочу добавить в код несколько logi c, чтобы при повторном щелчке он просто возвращался к исходному тексту. Я новичок в 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>

Ответы [ 5 ]

3 голосов
/ 05 августа 2020

как предложил @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>
1 голос
/ 05 августа 2020 

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>
1 голос
/ 05 августа 2020

посмотрите этот код: 

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

1 голос
/ 05 августа 2020

Идея такая: 

     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>
1 голос
/ 05 августа 2020

Если вам нужно более динамичное c решение (без жестко запрограммированных значений в обработчике, он автоматически отслеживает исходный текст), вы можете сделать это следующим образом: 

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