How to use vanilla JavaScript to click a div like button on an HTML page?-CodePudding

I'm currently trying to automate a game called Lyrics Training (https://www.lyricstraining.com/) using a JavaScript extension, and I am able to get the words that are from the button through some other code but I am currently struggling with clicking the "button" because it is for some reason classified as a DIV in the HTML code. I was wondering whether there was a way or a function that would allow me to click it so I could finish the automation? Thanks!

So far I have this code that would work if the button was an actual button:

let firstChoice = document.getElementsByClassName("slot s1")[0];
    let secondChoice = document.getElementsByClassName("slot s2")[0];
    let thirdChoice = document.getElementsByClassName("slot s3")[0];
    let fourthChoice = document.getElementsByClassName("slot s4")[0];

    // the click function isn't working
    for(let i = 0; i < click_order.length; i  ){
        let word = click_order[i];
        if(firstChoice.innerHTML === word){
            firstChoice.click();
        }else if(secondChoice.innerHTML === word){
            secondChoice.click();
        }else if(thirdChoice.innerHTML === word){
            thirdChoice.click();
        }else if(fourthChoice.innerHTML === word){
            fourthChoice.click();
        }
    }

Someone had also told me that I could inject code into the website and make the divs have the attribute 'role="button"', which I did using this code, which unfortunately did not succeed:


                    let firstChoice = document.getElementsByClassName("slot s1")[0];
                    let secondChoice = document.getElementsByClassName("slot s2")[0];
                    let thirdChoice = document.getElementsByClassName("slot s3")[0];
                    let fourthChoice = document.getElementsByClassName("slot s4")[0];
                    // add role="button" to all choices
                    firstChoice.setAttribute("role", "button");
                    secondChoice.setAttribute("role", "button");
                    thirdChoice.setAttribute("role", "button");
                    fourthChoice.setAttribute("role", "button");

 for(let i = 0; i < click_order.length; i  ){
        let word = click_order[i];
        if(firstChoice.innerHTML === word){
            firstChoice.click();
        }else if(secondChoice.innerHTML === word){
            secondChoice.click();
        }else if(thirdChoice.innerHTML === word){
            thirdChoice.click();
        }else if(fourthChoice.innerHTML === word){
            fourthChoice.click();
        }
    }

This is how the HTML for the button is structured in the website itself that is causing me issues:


<div  style=""><b style="opacity: 1; transform: matrix(1, 0, 0, 1, 0, 0);">Hope</b><ol></ol></div>

(That is 1/4 of the slots, each contains the word right before the tag)

Any help would be appreciated, thanks!

CodePudding user response：

Grab all button node and do loop for each event

document.querySelectorAll('.button').forEach(btn => {
    btn.addEventListener('click', function(e) {
    alert(e.target.innerText)
  })
})

<button >B 1</button>
<button >B 2</button>
<button >B 3</button>
<button >B 4</button>

CodePudding user response：

const div = document.getElementById("d");
div.click();

<div id="d" onclick="this.innerHTML='clicked'"> hi </div>

I think your code did click on the div, as shown in this example. There could be other issues causing the problem. Did you test that your code works if the element is a button instead of a div?