Javascript - addEventListener, если еще условие не работает - PullRequest
Новая
       46

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

0 голосов
/ 06 мая 2018

Я не понимаю, почему не работает второе условие (иначе, если внутри функции 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>

благодарственные года.

Ответы [ 3 ]

0 голосов
/ 06 мая 2018

Тест 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 голосов
/ 06 мая 2018

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

Что вы можете сделать, это проверить ID элемента, по которому щелкнули мышью. Что-то вроде 

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 голосов
/ 06 мая 2018

Ну, состояние 

if(document.getElementById("clickable2"))

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

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

function changeText(event){

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

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

function changeText(event){
     id = event.target.id
     document.getElementById(id).innerHTML = id == 'clickable1' ? text[0] : test[1];
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...