addEventListener fails to click the first time

Navigation
4

I'm trying to make a system that enlarges / reduces the width of two div with JavaScript. For some reason, the first time I press the button does not work. The following times it works perfectly.

Why does not the first time it is pressed work? 

function cambiaTam() {
  document.getElementById("b1").addEventListener('click', Ejecutar, false);
  document.getElementById("b2").addEventListener('click', Ejecutar, false);
}

function Ejecutar(evt) {
  if (this.id == "b1") {
    alert("b1 presionado");
    document.getElementById("colA").style.width = 25 + "%";
  }
  if (this.id == "b2") {
    alert("b2 presionado");
    document.getElementById("colA").style.width = 75 + "%";
  }
}
<header>
  <div class="container">
    <h1>Header</h1>
  </div>
</header>
<div class="container">
  <section class="main row">
    <div class="col-lg-9x" id="colA" style="width:75%; float:left; position:relative; padding-right:15px; padding-left: 15px;">
      <!--<div class="col-lg-9x" id="colA" >-->
      <h3>Article</h3>
      <button id="b1" onclick="cambiaTam()">+</button>
      <button id="b2" onclick="cambiaTam()">-</button>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <div class="col-lg-3 azul" id="colB">
      <h3>Aside</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </section>
  
</div>
<!--fin container-->
    
asked by RicardoKra 06.03.2018 в 13:50
source

2 answers

3

If you use onclick in HTML, you do not need to add a new manager for that event: 

<button id="b1" onclick="Ejecutar(this)">+</button>
<button id="b2" onclick="Ejecutar(this)">-</button>


function Ejecutar(evt) {
  if (evt.id == "b1") {
    alert("b1 presionado");
    document.getElementById("colA").style.width = 25 + "%";
  }
  if (evt.id == "b2") {
    alert("b2 presionado");
    document.getElementById("colA").style.width = 75 + "%";
  }
}
<header>
  <div class="container">
    <h1>Header</h1>
  </div>
</header>
<div class="container">
  <section class="main row">
    <div class="col-lg-9x" id="colA" style="width:75%; float:left; position:relative; padding-right:15px; padding-left: 15px;">
      <!--<div class="col-lg-9x" id="colA" >-->
      <h3>Article</h3>
      <button id="b1" onclick="Ejecutar(this)">+</button>
      <button id="b2" onclick="Ejecutar(this)">-</button>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <div class="col-lg-3 azul" id="colB">
      <h3>Aside</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </section>
  
</div>
<!--fin container-->

Just as you have the code what fails you is that the call to cambiaTam() is made after pressing the button the first time, at which time the correct event managers are installed. That's why the second one works for you.

You must call it after loading the DOM (or directly after declaring the buttons in HTML): 

/* Agregamos el gestor de eventos tras cargar el DOM */
document.addEventListener("DOMContentLoaded", function(event) {
  document.getElementById("b1").addEventListener('click', Ejecutar, false);
  document.getElementById("b2").addEventListener('click', Ejecutar, false);
});

function Ejecutar(evt) {
  if (this.id == "b1") {
    alert("b1 presionado");
    document.getElementById("colA").style.width = 25 + "%";
  }
  if (this.id == "b2") {
    alert("b2 presionado");
    document.getElementById("colA").style.width = 75 + "%";
  }
}
<header>
  <div class="container">
    <h1>Header</h1>
  </div>
</header>
<div class="container">
  <section class="main row">
    <div class="col-lg-9x" id="colA" style="width:75%; float:left; position:relative; padding-right:15px; padding-left: 15px;">
      <!--<div class="col-lg-9x" id="colA" >-->
      <h3>Article</h3>
      <button id="b1">+</button>
      <button id="b2">-</button>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <div class="col-lg-3 azul" id="colB">
      <h3>Aside</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </section>
  
</div>
<!--fin container-->
    
answered by 06.03.2018 / 14:08
source
0

What happens is that at the moment of adding the event listener, in the first instance it does not exist for the indicated elements. When you enter the function you will add them, but the 'click' event will have already been registered before knowing the function Ejecutar and therefore will not execute the same.

To solve your problem, you could include listening as a general event: 

(function() {
    document.getElementById("b1").addEventListener('click', Ejecutar, false);
    document.getElementById("b2").addEventListener('click', Ejecutar, false);
})();

This way your event listener will have been registered before clicking on your buttons.

    
answered by 06.03.2018 в 14:12
2 font styles at once with swing Number records of a query in MySQL (alternative to variables defined by the user)