Question

我使用javascript动态生成一个可变长度的HTML表，在该表单中我为每一行插入一个按钮。按钮应该在单击时调用函数，但是现在在页面加载/表生成时为每一行调用该函数。如果有多个按钮（因为我为每行创建一个按钮），每个按钮都会调用该函数。我知道这是因为我在upVoteA（）中有一个带调用者姓名的警报。

以下是创建按钮的调用部分（整个函数位于此帖的底部）：

        var tr1 = document.createElement('TR');
        var upvote = document.createElement('button')
        upvote.name = i + offset
        upvote.onclick = upVoteA(upvote.name)
        upvote.innerHTML = "Upvote link"
        tr1.appendChild(upvote)

我错过了一些属性来改变这种行为吗？我的代码出了什么问题？

此外，这是我调用的完整函数，以便在有用的情况下生成表格。

function answerTableText(idd, offset)
{
    var answerDiv = document.getElementById("answerShow")
    while(answerDiv.firstChild){
        answerDiv.removeChild(answerDiv.firstChild)
    }

    if(qnumans_array[idd] >0)
    {

        var table = document.createElement('TABLE');

        var tableBody = document.createElement('TBODY');
        table.appendChild(tableBody);

        for (var i=0; i<qnumans_array[idd]; i++){
            var tr = document.createElement('TR');

            var td1 = document.createElement('TD')
            td1.innerHTML = answer_array[i + offset]

            var td2 = document.createElement('TD')
            var tr1 = document.createElement('TR');
            //tr1.innerHTML = "Upvote"
            var upvote = document.createElement('button')
            upvote.name = i + offset
            upvote.onclick = upVoteA(upvote.name)
            upvote.innerHTML = "Upvote link"

            tr1.appendChild(upvote)

            var tr2 = document.createElement('TR');
            tr2.innerHTML = "Downvote"
            td2.appendChild(tr1)
            td2.appendChild(tr2)
            td1.padding = "1em"
            td2.padding = "1em"

            tr.appendChild(td1)
            tr.appendChild(td2)
            tr.style.borderBottom = "thin solid #37434E"    
            tr.style.borderTop = "thin solid #37434E"   

           tableBody.appendChild(tr);   
        }
        answerDiv.appendChild(table);

    }
    else answerDiv.innerHTML = "No answers yet."


}

Answer 1

当你说：

upvote.onclick = upVoteA(upvote.name)

您立即调用该函数，并将其结果分配给onclick。你想要这样的东西：

upvote.onclick = function() {
  upVoteA(upvote.name);
};

Answer 2

这一行：

upvote.onclick = upVoteA(upvote.name)

调用 upVoteA并将其返回值分配给onclick属性，就像

一样

a = foo()

调用 foo并将其返回值分配给a。

相反，使用显式包装器为其分配一个函数：

upvote.onclick = function() {
    upVoteA(upvote.name);
};

...或使用Function#bind：

upvote.onclick = upVoteA.bind(null, upvote.name);

在页面加载时调用javascript函数，而不是在动态生成的表中单击按钮时

2 个答案: