如何使用传递给 JavaScript 中的 function 的参数添加点击事件侦听器

Question

Here are my functions:

function type(message) {
    document.getElementById("body").innerHTML="<div id=\"textbox\" class=\"textbox\"></div><div id=\"oc\" class=\"option-container\"></div>"
    for (let i=1; i<9; i++) {
        document.getElementById("oc").innerHTML+="<div id=\"o"+i+"\" class=\"option\"></div>"
    }
    printLetterByLetter("textbox", message, 15)
}

function createop(text, program) {
    for (let i=1; i<9; i++) {
        if (!document.getElementById("o"+i).classList.contains("filled")) {
            document.getElementById("o"+i).classList.add("filled")
            document.getElementById("o"+i).innerText=text
            document.getElementById("o"+i).addEventListener("click", ()=> {program})
            i=9
        }
    }
}

The type function is always called before the createop function.

I want to run whatever the program argument contains when that HTML object is clicked on. The way I did it above does not work. How can I do this?

The code in its entirety can be found here: https://github.com/Fish767/Feedback-Nightmare/tree/master and the two functions above are located in the asterfix.js file which is in the js folder.

Answer 1

TL;DR
You are missing parentheses to call the function. Solution code:

function createop(text, program) {
    for (let i=1; i<9; i++) {
        if (!document.getElementById("o"+i).classList.contains("filled")) {
            document.getElementById("o"+i).classList.add("filled")
            document.getElementById("o"+i).innerText=text
            document.getElementById("o"+i).addEventListener("click", ()=> {program()})
            i=9
        }
    }
}

Long answer: By not putting the parentheses after program , you are just writing a serialized form of the function and then ending the line. The following program shows serialized vs called (without parens vs with).

 function abc() { return "abc"; } console.log("Without parens: " + abc); console.log("With parens: " + abc());

Edit: You are calling the creatop function like this:

createop("Try Again","stop=true;updateGUI4();")

However it is not good practice to use strings and eval() them (what you are trying to do here will fail in strict mode)

Alternatively, you could call the function like this:

createop("Try Again",()=>{let stop=true;updateGUI4();})

which uses anonymous functions to allow the above solution to work. However, this will not change the value of the stop variable.

Answer 2

This can be solved by slightly modifying the for loop in the createop function. If we remove all the options that have no code in them, then we can recreate them and add code to the first one. The options with code have the class filled and we can use this to determine which options are empty.

function createop(text, program) {

    //used in if statement later
    let temporarycode=program


    for (let i=1; i<9; i++) {

        //This determines which options are filled. It selects all that are not
        if (!document.getElementById("o"+i).classList.contains("filled")) {


            //delete the empty option and create a new option that contains the passed arguments
            document.getElementById("o"+i).remove()
            document.getElementById("oc").innerHTML+="<div id=\"o"+i+"\" class=\"option\" onclick=\""+temporarycode+"\">"+text+"</div>"


            //this is used to determine if the option is the first one modified
            if (temporarycode===program) {


                //adds the filled class so we don't modify this with future additions
                document.getElementById("o"+i).classList.add("filled")
            }


            //replace the arguments so that each option after the first is empty
            temporarycode=""
            text=""
        }
    }
}

By removing each empty option and adding them again we maintain the proper number of options desired and we keep them in the proper order.