1

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

introducir la descripción de la imagen aquí

los botones implementados con button trabajan perfectamente pero quiero cambiarlos por el boton de la esquina inferior izquierda, la interfaz funciona bien pero nunca llama la funcion, tambien probé de esta manera pero de igual forma no trabaja:

  <div class="toggleBox">
    <div class="toggle">
      <input type="checkbox" "button_1_on()>
      <label for="" class="onbtn" onclick= "button_1_on()">On</label>
      <label for="" class="ofbtn" onclick= "button_1_off()">Off</label>
    </div>
  </div>
4
  • Estás agregando las funciones a los labels en vez del checkbox. Si das click justo en los labels, ¿se corren las funciones? Commented el 2 oct. 2021 a las 0:46
  • @CamiloGomez, discúlpeme, no entiendo que me quiere decir con que si se corren las funciones
    – Xavier
    Commented el 2 oct. 2021 a las 1:07
  • Dale un id al checkbox <input type="checkbox" id="switch"> y luego agrega en los labels for="switch"
    – Jaime
    Commented el 2 oct. 2021 a las 1:58
  • ¿puedo llamar una función dentro de la etiqueta <label>?¿como se haría? lo que quiero es que cuando presione encima del botón de la esquina inferior izquierda y este cambie se ejecute una funcion
    – Xavier
    Commented el 2 oct. 2021 a las 3:06

2 respuestas 2

0

hice hace poco un botón parecido. A mi me funcionaba así.

<label class="switch switchinfo">
<input id='checktotal-sil' type="checkbox">
<span class="slider round"></span>
</label>

Para saber si el botón esta en on o en off, lo hice a través de jQuery.

if($('#checktotal-sil').is(':checked')){    
       
                //Aqui tu código si esta el botón en on
}else {

//botón en off
}

Para hacer que reaccione cuando alguien lo activa.

 $("#checktotal-sil").click(function() {

//Aquí el código
}

Espero que te funcione.

0

Puedes agregar las funciones al checkbox utilizando el siguiente código de javascript. Primero seleccionas el elemento, luego preguntas si está o no seleccionado. Si está seleccionado, ejecutas una función, si no, ejecutas otra.

const switchButton = document.querySelector('input[type="checkbox"]')
    switchButton.addEventListener('click', e =>{
      if(switchButton.checked)
        button_1_on()
      else
         button_1_off()  
    })

Convendría que agregaras los estilos del botón para reproducir tu ejemplo. De cualquier forma te adjunto un pequeño demo funcional utilizando bootstrap y un fragmento de tus funciones.

const switchButton = document.querySelector('input[type="checkbox"]')
switchButton.addEventListener('click', e =>{
  if(switchButton.checked)
    button_1_on()
  else
     button_1_off()  
})


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

function button_1_off()
{console.log("Led esta en OFF");}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
</div>

Tu Respuesta

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

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