4

Estoy tratando de hacer un sistema que agrande/reduzca el ancho de dos div con JavaScript. Por alguna razón, la primera vez que pulso el botón no funciona. Las siguientes veces funciona perfectamente.

¿Por qué la primera vez que se pulsa no funciona?

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

2
  • Lo que sucede es que al hacer el primer click, ejecutas cambiaTam() y esta setea los listener de los botones, entonces recien apartir del 2do click el botón tiene un listener el cual responde al click a la vez que tambien se ejecuta cambiaTam() el 6 mar. 2018 a las 13:06
  • ¿Alguna respuesta solucionó tu problema? Agradecería que si así fue marcaras alguna como correcta. Gracias. el 8 mar. 2018 a las 14:53

2 respuestas 2

4

Si usas onclick en HTML no es necesario que le añadas un gestor nuevo para dicho evento:

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

Tal y como tienes el código lo que te falla es que la llamada a cambiaTam() la haces tras pulsar el botón la primera vez, momento en el que se instauran los gestores de eventos correctos. Por eso te funciona la segunda.

Debes llamarlo tras cargar el DOM (o directamente tras declarar los botones en 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-->

0

Lo que sucede es que en el momento de agregar el escucha de eventos, en primer instancia no existe para los elementos indicados. Al entrar a la función los agregará, pero el evento 'click' ya habrá sido registrado antes de conocer la función Ejecutar y por lo tanto no ejecutará la misma.

Para resolver tu problema podría incluir el escucha como un evento general:

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

De esta manera tu escucha de eventos habrá sido registrado antes de dar click en tus botones.

2
  • 1
    ¿Realmente necesitas IIFE para ese código? ¿Te has dado cuenta que no funcionará sustituyéndolo tal cual? el 6 mar. 2018 a las 13:13
  • 2
    Tienes razón, parece que lo más correcto sería utilizar la siguiente forma; document.addEventListener("DOMContentLoaded", function(event) { }); el 6 mar. 2018 a las 13:24

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.