how to create element and put parameters in his on-click

Question

I'm building a page of forms which everyone will be able to create their own form and I'm trying to build a chooser question. I have a code like that:

            Q.push({
                text: document.createElement("h3"),
                divQ: document.createElement("div"),
                divO: document.createElement("div"),
                chooserButton: document.createElement("button"),
                optionNum: 0
            });
            //var text = document.createElement("h3");
            Q[qNum - 1].text.innerHTML = "question " + qNum + " - " + kind;
            document.getElementById("question" + (qNum - 1)).appendChild(Q[qNum - 1].text);
            //var chooserButton = document.createElement("button");
            Q[qNum - 1].chooserButton.innerHTML = "add option";
            Q[qNum - 1].chooserButton.className = "smallB";
            Q[qNum - 1].chooserButton.type = "button";
            Q[qNum - 1].optionNum = 0;
            var g = "text!";
            Q[qNum - 1].chooserButton.onclick = h.bind(o);
            Q[qNum - 1].text.appendChild(Q[qNum - 1].chooserButton);//need to fix the div of the options
            //var divO = document.createElement("div");
            //var divQ = document.createElement("div");
            Q[qNum - 1].divO.id = "O" + qNum + Q[qNum - 1].optionNum[qNum];
            Q[qNum - 1].divQ.id = "question" + qNum;
            Q[qNum - 1].text.appendChild(Q[qNum - 1].divO);
            Q[qNum - 1].text.appendChild(Q[qNum - 1].divQ);
            Q[qNum - 1].optionNum++;
        }

        qNum++;



    function h(g) { alert("hello" + g);}

how can I get the g?

this h function is just an example for what I'm trying to do but if you will fix that I will be able to fix the real function, I don't want to show it because it has its own problems

Answer 1

You could use the data attributes in jquery.

Something like the following:

Q.push({
            text: document.createElement("h3"),
            divQ: document.createElement("div"),
            divO: document.createElement("div"),
            chooserButton: document.createElement("button"),
            optionNum: 0
        });
        //var text = document.createElement("h3");
        Q[qNum - 1].text.innerHTML = "question " + qNum + " - " + kind;
        document.getElementById("question" + (qNum - 1)).appendChild(Q[qNum - 1].text);
        //var chooserButton = document.createElement("button");
        Q[qNum - 1].chooserButton.innerHTML = "add option";
        Q[qNum - 1].chooserButton.className = "smallB";
        Q[qNum - 1].chooserButton.type = "button";
        Q[qNum - 1].optionNum = 0;
        var g = "text!";
        Q[qNum - 1].data("g", g); //Store the data under the key 'g'
        Q[qNum - 1].chooserButton.onclick = h.bind(o);
        Q[qNum - 1].text.appendChild(Q[qNum - 1].chooserButton);//need to fix the div of the options
        //var divO = document.createElement("div");
        //var divQ = document.createElement("div");
        Q[qNum - 1].divO.id = "O" + qNum + Q[qNum - 1].optionNum[qNum];
        Q[qNum - 1].divQ.id = "question" + qNum;
        Q[qNum - 1].text.appendChild(Q[qNum - 1].divO);
        Q[qNum - 1].text.appendChild(Q[qNum - 1].divQ);
        Q[qNum - 1].optionNum++;
    }

    qNum++;



function h(g) { alert("hello" + $(this).data("g")) ;} //retrieve the data 'g'