Skip to main content
1 de 2

Inconveniente al implementar un boton html5

tengo un problema al implementar un botón que cambie de on/off y viceversa, el detalle está que cuando presiono arriba de el, el efecto visual ocurre pero el proceso que debería pasar al apretar sobre el no sucede.

A continuación colocaré el código y explicaré a detalle cual es el problema:

function button_1_on()
{
  console.log("Led esta en ON");
  connection.send("Led esta en ON");
}

function button_1_off()
{
console.log("Led esta en OFF");
connection.send("Led esta en OFF");
}

Tengo esas dos funciones que cumplen con la finalidad de que cuando es convocada, envía tales cadenas de caracteres a un esp32, si implemento los botones de la manera que se vera a continuación todo fluye:

<center>
  <h1>ESP32 Led on/off</h1>
  <h3> LED </h3>
  <button onclick= "button_1_on()" >On</button>
  <button onclick="button_1_off()" >Off</button>
</center>

ahora, cuando lo implemento de la manera siguiente, que es con un mejor aspecto visual, nunca se llega a ejecutar tal funcion:

    <div class="toggleBox">
     <div class="toggle">
      <input type="checkbox">
      <label for="" class="onbtn" onclick= "button_1_on()">On</label>
      <label for="" class="ofbtn" onclick= "button_1_off()">Off</label>
    </div>
  </div>

Desconozco cual es el problema, intuyo que es justo en donde se agrega la función button_1_ON, pero no se donde colocarla