In a project, I am trying to make a button work based on the events happening in an event listener, so whenever the button has clicked the events in that event listener is supposed to execute, so is there a way to add <button onclick="EVENT LISTENER"></button>??
EDIT:THIS IS THE CODE IM TRYING TO IMPLEMENT IN, I AM TRYING TO FLIP TO THE NEXT PAGE WHEN I CLICK THE BUTTON
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>That's exactly what onclick was designed for. Have a look at this tutorial.
Here an example. When you click the button an alert will pop up saying "The button was clicked".
function handleClick(){
alert("The button was clicked")
}<button onclick="handleClick()">Click me!</button>You may also attach an event listener in your JavaScript code.
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>You could dispatch events:
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>