es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Cómo puedo combinar 2 funciones onclick en JavaScript?

02 Aug, 2023 Programación

Hola, estoy intentando combinar 2 funciones onClick de JavaScript para que solo se ejecuten una vez que ambas hayan sido clickeadas. Esto es lo que he intentado hasta ahora.

Javascript

click.onclick = function() {
   for (let i = 0; i < 1; i++) {
       console.log("Clicks contados " + I);
   }
}

click2.onclick = function() {
  for (let i = 0; i < 1; i++) {
      console.log("Clicks contados " + I);
  }
}

if (click.onclick && click2.onclick === true) {
   console.log("Has clickeado en ambos onClicks");
}

HTML

<section>
    <button id="&quot;button-click&quot;&gt;Bueno&lt;/button&gt;"></button><button id="&quot;button-click-2&quot;&gt;Aún" mejor&lt;/button&gt;=""></button></section>

Sé que es muy simple, pero solo quería descubrir cómo hacer esto, ya que es para una llamada de API que requiere que ambos botones sean clickeados y luego enviar una declaración.

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para combinar dos funciones onClick de JavaScript para que se ejecuten solo una vez que ambas hayan sido clickeadas, puedes utilizar una variable de contador y verificar si alcanza el valor deseado antes de ejecutar la instrucción. Aquí tienes un ejemplo de fragmento de código:

    Javascript

    let contador = 0;

function onClickUno() {
  contador++;

  if (contador === 2) {
    enviarDeclaracion();
  }
}

function onClickDos() {
  contador++;

  if (contador === 2) {
    enviarDeclaracion();
  }
}

function enviarDeclaracion() {
  console.log("Has clickeado en ambos onClicks");
  // Agrega aquí tu llamada a la API
}

    En tu HTML, debes llamar a estas funciones utilizando el atributo onclick:

    HTML

    <section>
  <button id="button-click" onclick="onClickUno()">Bueno</button>
  <button id="button-click-2" onclick="onClickDos()">Aún mejor</button>
</section>

    En este ejemplo, la variable contador comienza en 0 y se incrementa cada vez que se hace clic en uno de los botones. Cuando el contador alcanza 2, se llama a la función enviarDeclaracion(), que mostrará el mensaje deseado y realizará la llamada a tu API. Ten en cuenta que puedes personalizar la función enviarDeclaracion() para incluir cualquier declaración o lógica necesaria para tu caso de uso específico.

Comments are closed.