Lost focus on eventListener

user_10259326 0
Viewed 49

Hi everyone im try loop in tags of html and when I press one button need that change the text of h2 ... but i dont know how to do.

this me html

let contenedor = document.querySelector('.container');
let chText = document.querySelector('.change');

contenedor.addEventListener('click', (e) => {

    console.log(`Nombre: ${this.name} Nombre target: ${e.target.className}`);

    if(e.target.matches('.inicio')){

        changeText(e);
    }
});

function changeText(e){

    //console.log(e.currentTarget)
    chText.innerText = 'text Change';
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div class="container">
    <div class="card" style="border:1px solid gray; width: 20%">
      <h2 class="change">HIHO</h2>
      <button class="inicio">Change</button>
    </div>
     <div class="card" style="border:1px solid gray; width: 20%">
      <h2 class="change">HIHO</h2>
      <button class="inicio">Change</button>
    </div>
     <div class="card" style="border:1px solid gray; width: 20%">
      <h2 class="change">HIHO</h2>
      <button class="inicio">Change</button>
    </div>
  </div>
</body>
</html>

If I use querySelectorAll to class change, try loop but this change all text.. and i want to do that only change text the button I press

how to referece between button and text (h2)..?

addeventlistener loops javascript
1 Answers

You could use previousElementSibling... You have to start from the e.target to know which h2 to change.

let contenedor = document.querySelector('.container');

// Don't define it here. That's the first one only, anyway.
//let chText = document.querySelector('.change');  

contenedor.addEventListener('click', (e) => {

  console.log(`Nombre: ${this.name} Nombre target: ${e.target.className}`);

  if (e.target.matches('.inicio')) {
    changeText(e);
  }
});

function changeText(e) {

  //console.log(e.currentTarget)
  //chText.innerText = 'text Change';
  e.target.previousElementSibling.innerText = 'text Change';
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <div class="container">
    <div class="card" style="border:1px solid gray; width: 20%">
      <h2 class="change">HIHO</h2>
      <button class="inicio">Change</button>
    </div>
    <div class="card" style="border:1px solid gray; width: 20%">
      <h2 class="change">HIHO</h2>
      <button class="inicio">Change</button>
    </div>
    <div class="card" style="border:1px solid gray; width: 20%">
      <h2 class="change">HIHO</h2>
      <button class="inicio">Change</button>
    </div>
  </div>
</body>

</html>

If you are to have some other elements between th h2 and the button, you will have to look for the closest parent .card and then look for the element to change the text...

let contenedor = document.querySelector('.container');

// Don't define it here. That's the first one only, anyway.
//let chText = document.querySelector('.change');  

contenedor.addEventListener('click', (e) => {

  console.log(`Nombre: ${this.name} Nombre target: ${e.target.className}`);

  if (e.target.matches('.inicio')) {
    changeText(e);
  }
});

function changeText(e) {
  e.target.closest(".card").querySelector(".change").innerText = 'text Change';
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <div class="container">
    <div class="card" style="border:1px solid gray; width: 20%">
      <h2 class="change">HIHO</h2>
      <p>Something else...</p>
      <button class="inicio">Change</button>
    </div>
    <div class="card" style="border:1px solid gray; width: 20%">
      <h2 class="change">HIHO</h2>
      <p>Something else...</p>
      <button class="inicio">Change</button>
    </div>
    <div class="card" style="border:1px solid gray; width: 20%">
      <h2 class="change">HIHO</h2>
      <p>Something else...</p>
      <button class="inicio">Change</button>
    </div>
  </div>
</body>

</html>

user_21595280
Related