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 ></i> </button>

CodePudding user response：

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>

CodePudding user response：

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"  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>