En un proyecto, estoy tratando de hacer que un botón funcione en función de los eventos que ocurren en un detector de eventos, por lo que cada vez que el botón ha hecho clic en los eventos en ese detector de eventos se supone que debe ejecutarse, ¿hay alguna manera de agregar <button onclick="EVENT LISTENER"></button>??
EDITAR: ESTE ES EL CÓDIGO QUE INTENTE IMPLEMENTAR, ESTOY INTENTANDO PASAR A LA SIGUIENTE PÁGINA CUANDO HAGO CLIC EN EL BOTÓN
async function nxtbtnclicked() { const current2 = versesList.innerHTML const numbers2 = current2.match(/\d/g); //to get the numbers from the string const nid2 = numbers2[1]; const finalid = parseFloat(nid2); if (finalid < 114) getVersesforpage(finalid + 1) if (finalid === 114) getVersesforpage(finalid) //113 > 2 !fix } async function getVersesforpage(number) { //to get verses for a certain pagetry try { const url = `https://api.alquran.cloud/v1/page/${number}/quran-uthmani`; const response = await fetch(url); const data = await response.json(); const ayahs = data.data.ayahs; const verses = ayahs.map(ayah => ayah.text); return verses; } catch (e) { console.log("Error:", e.message) } } const form = document.getElementById("form"); form.addEventListener("submit", async (event) => { event.preventDefault(); const { number } = event.target.elements; const value = number.value; const json = { id: value } repo.addpagenumber(json) //add the page number to the indexeddb const versesdb = await repo.getpageversesById(value) if (versesdb === undefined) { const verses = await getVersesforpage(value) console.log(verses) //create an object const versesobject = { id: value, verses: verses } repo.addpagesverses(versesobject) } //use db data info const {id, verses} = versesdb const versesHtml = ` <h3>رقم الصفحة: ${value} </h3> ${verses} ` document.querySelector('#versesList').innerHTML = versesHtml; }); <button id="next-btn" onclick="nxtbtnclicked()"> <i class="fa fa-chevron-left fa-3x"></i> </button>Eso es exactamente para lo que se diseñó onclick . Echa un vistazo a este tutorial .
Aquí un ejemplo. Cuando haga clic en el botón, aparecerá una alerta que dice "Se hizo clic en el botón" .
function handleClick(){ alert("The button was clicked") } <button onclick="handleClick()">Click me!</button>También puede adjuntar un detector de eventos en su código JavaScript.
function handleClick(){ alert("The button was clicked") } window.addEventListener('DOMContentLoaded', (event) => { // initial HTML document has completely loaded now // get the button using the ID it has been assigned in the HTML const myButton = document.getElementById("my-button") // attach the event listener here // handle the "click" event and whenever that event occurs call the function handleClick() myButton.addEventListener("click", handleClick); }); <button id="my-button">Click me!</button>Podrías enviar eventos:
function rgb(e) { e.preventDefault(); e.stopPropagation(); e.target.style.backgroundColor = `rgb(${+(Math.random()*255)},${+(Math.random()*255)},${+(Math.random()*255)})`; console.log("clicked", e.target); } function trigger(e) { e.preventDefault(); e.stopPropagation(); console.log("dispatch click event to container element"); content.dispatchEvent(new CustomEvent("click")); } .content { border: 1px solid black; width: 315px; height: 200px; user-select: none; margin: 0; padding: 3px; } .content > span { display: inline-block; border: 1px solid black; width: 100px; height: 100px; line-height: 100px; vertical-align: middle; text-align: center; margin: 0; } <div id="content" class="content" onclick="rgb(event)"> <span><button>button 1</button></span> <span><button onclick="rgb(event)">rgb()</button></span> <span><button onclick="trigger(event)">trigger()</button></span> click anywhere </div>