Javascript - addEventListener, если другое условие не работает

Я не понимаю, почему второе условие не работает (иначе, если внутренняя функция changeText).

когда я нажимаю, меняю клики на clickable1 и clickable2 вместе вместо того, чтобы обрабатывать каждый из моих кликов отдельно.

мой код:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

<h1 id="clickable1"> Click me plz </h1>
<h2 id="clickable2"> Click me too plz </h2>
<script>
var text = ["thanks for clicking first", "thanks… but why only second?"];
var index = 0;
var indexId = 0;
document.getElementById("clickable1").addEventListener("click",changeText);
document.getElementById("clickable2").addEventListener("click",changeText);

function changeText(){
  if(document.getElementById("clickable1")){
    document.getElementById("clickable1").innerHTML = text[0];
  }
    else if(document.getElementById("clickable2")){
      document.getElementById("clickable2").innerHTML = text[1];
  }
}
</script>
</head>
<body>

</body>
</html>

Спасибо.

-5
источник поделиться
3 ответа

Хорошо, условие

if(document.getElementById("clickable2"))

просто проверяет, существует ли элемент DOM с свойством clickable2 id.

Одним из решений вашей проблемы может быть передача параметра события в вашу функцию.

function changeText(event){

а затем просто используйте свойство event.target, чтобы узнать элемент управления, который запускает обработчик события click.

Кроме того, ваш код может быть упрощен с помощью ternary оператора:

function changeText(event){
     id = event.target.id
     document.getElementById(id).innerHTML = id == 'clickable1' ? text[0] : test[1];
}
0
источник

Тест if (document.getElementById("clickable1")):

  1. Вызов getElementById
  2. Это будет оцениваться как null (если элемент не существует) или элемент (если это так).
  3. Проверьте, является ли это истинным значением (элементы, null - нет).

Ваш тест не имеет никакого отношения к определению того, на какую кнопку нажали, только если он существует в документе.

this будет элемент, на который был прикреплен обработчик событий, поэтому вы можете сравнить это с кнопками...

if (document.getElementById("clickable1") === this){

Между тем объект события скажет вам, какой элемент был нажат, поэтому вы можете сделать следующее:

function changeText(evt){
    if (document.getElementById("clickable1") === evt.target)

... этот подход лучше, когда вы используете делегирование событий, поскольку он позволяет связать обработчик события один с элементом, который является предком элементов, на которые можно щелкнуть.

Однако это более сложный подход, и вам приходится учитывать такие ситуации, как:

<button> a <span>b</span> c </button>

... где щелчок на кнопке b даст вам цель события элемента <span>.

0
источник

Второе условие никогда не выполняется, потому что первое условие всегда верно. Вы проверяете, есть ли в DOM элемент с идентификатором, равным clickable1. И это всегда верно. Вот почему он никогда не входит, если

Что вы можете сделать, это проверить идентификатор элемента clicked. Что-то вроде

var text = ["thanks for clicking first", "thanks… but why only second?"];
var index = 0;
var indexId = 0;
document.getElementById("clickable1").addEventListener("click",changeText);
document.getElementById("clickable2").addEventListener("click",changeText);

function changeText(event){
  if(event.target.id === "clickable1"){
    document.getElementById("clickable1").innerHTML = text[0];
  }
    else if(event.target.id === "clickable2"){
      document.getElementById("clickable2").innerHTML = text[1];
  }
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

<h1 id="clickable1"> Click me plz </h1>
<h2 id="clickable2"> Click me too plz </h2>

</head>
<body>

</body>
</html>
0
источник

Посмотрите другие вопросы по меткам или Задайте вопрос