Quiero hacer que una function deje de funcionar cuando se hace clic en un botón en Javascript.
Intento usar la declaración if para verificar si se hace clic en el botón o no. Además, he intentado hacer que la función deje de funcionar cuando se cumple una determinada condición dentro de otra función.
Sin embargo, todavía no funciona más.
¿Alguien sabe cómo hacer que funcione y por qué onclick == true ya no funciona?
let textarea = document.getElementsByTagName('textarea')[0] let message = document.getElementById('message') function clicks() { console.log('hi') //I want to make the appear function stop working when this function is executing. } function appear() { //this is not working if (document.getElementsByTagName('button')[0].onclick == true) { message.style.display = 'none' console.log('it works') } else { message.style.display = 'revert' textarea.value = textarea.value.trimStart(); } }; <textarea></textarea> <div id="message">.....</div> <button onclick="clicks()">split(20px)</button>onclick es un evento que se activa cuando se produce el evento de click . Como resultado, onclick no almacena el estado. appear crear funciones variables, visibles para hacer clicks y appear , y usarlas para identificar el indicador para detener la ejecución de la función.
let textarea = document.getElementsByTagName('textarea')[0]; let message = document.getElementById("message"); let stopButtonClicked = false; function clicks() { console.log("hi"); stopButtonClicked = true; } function appear() { if (stopButtonClicked) { message.style.display = "none"; console.log("it works"); } else { message.style.display = "revert"; textarea.value = textarea.value.trimStart(); } }Necesita aplicar lógica de semáforo, como:
let beingClicked = false; function clicks() { beingClicked = true; console.log('hi'); //I want to make the appear function stop working when this function is executing. beingClicked = false; } function appear() { //this is not working if (beingClicked) { message.style.display = 'none' console.log('it works') } else { message.style.display = 'revert' textarea.value = textarea.value.trimStart(); } }; Tenga en cuenta que al comienzo de la function , configuramos el semáforo ( beingClicked ) en rojo (que es true en este caso) y al final de la function lo configuramos en false .
Es importante tener en cuenta que hay dos problemas adicionales a considerar:
Es posible que deba reutilizar esta lógica para otros botones. Si es así, entonces podría considerar lo siguiente:
function ButtonSemaphore(button) { let semaphore = false; let events = []; button.addEventListener("click", function(evt) { semaphore = true; for (let event of events) event(evt); semaphore = false; }); function isRed() { return semaphore; } function isGreen() { return !semaphore; } function addEvent(callback) { events.push(callback); } } Puede instanciar esto llamándolo como let myButtonSemaphore = new ButtonSemaphore(button) , donde button es un botón válido. Siempre que desee agregarle un evento, simplemente llame a myButtonSemaphore.addEvent(function(evt) {/* Some code */}) . Tenga en cuenta que la matriz de eventos se procesa y el semáforo se configura correctamente antes y después de todos los eventos.
Es posible que deba reutilizar esto, por lo que se recomienda crear un archivo .js propio, de modo que su código exista exactamente una vez y se pueda importar cuando sea necesario.
let textarea = document.getElementsByTagName('textarea')[0] let message = document.getElementById('message') function clicks() { console.log('hi') //I want to make the appear function stop working when this function is executing. } function appear() { //this is not working if (document.getElementsByTagName('button')[0].onclick == true) { message.style.display = 'none' console.log('it works') } else { message.style.display = 'revert' textarea.value = textarea.value.trimStart(); } }; <textarea></textarea> <div id="message">.....</div> <button onclick="clicks()">split(20px)</button>