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-->
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 ejecutacambiaTam()