Question

当我使用单个函数通过使用for循环创建多个html表行时，我也在每行中创建了一个文本框和一个按钮。

我没做的是当用户点击按钮时，它将获得文本框值（在同一行内）。我收到了错误：未捕获的TypeError：无法读取null

的属性“value”

请查看以下bidbtn.onclick = function（）部分：

function tablelisting(){
    for(i=0;i<domainarray.length;i++){
        var newtr = document.createElement("tr")
        var newtd1 = document.createElement("td")
        var newtd2 = document.createElement("td")
        var newtd3 = document.createElement("td")
        var newtd4 = document.createElement("td")
        var newtd5 = document.createElement("td")
        var bidbtn = document.createElement("button")
        var textbox = document.createElement("input")

        bidbtn.innerHTML = "Bid"
        bidbtn.setAttribute("class","btn1")
        //bidbtn.setAttribute("onclick","bid()")

        textbox.setAttribute("type","text")
        textbox.setAttribute("placeholder","USD")
        textbox.setAttribute("class","bidtextbox")
        textbox.setAttribute("id","bidinput"+i)

        newtr.appendChild(newtd1)
        newtd1.innerHTML = domainarray[i].domain
        newtr.appendChild(newtd2)
        newtd2.innerHTML = domainarray[i].dtcreate
        newtr.appendChild(newtd3)
        newtd3.innerHTML = domainarray[i].dtexpire
        newtr.appendChild(newtd4)
        newtd4.innerHTML = (Date.parse(domainarray[i].dtexpire) - Date.parse(formatDate(new Date())))/86400000 + " days"
        newtr.appendChild(newtd5)
        newtd5.appendChild(textbox)
        newtd5.appendChild(bidbtn)

        bidbtn.onclick = function(){
            var bidamount = document.getElementById("bidinput"+i).value
            console.log(bidamount)
        }

        domtable.appendChild(newtr)
    }
}

我知道每个bidbtn与同一行中的文本框相关联，但我不知道如何在用户填写金额并点击bidbtn后获取文本框的值。

如何在用户填写金额后使bidamount =文本框的值？

Answer 1

你不能像这样使用i，因为它在循环的每次迭代中都会被改变。当点击处理程序触发时，它将始终是最后一次迭代的值，因此点击处理程序不会按预期工作。要解决此问题，请使用：

domarray.forEach(function (elm, index) {
  // ...
});

您可以在docs中详细了解Array.prototype.forEach()。

现在，如果您发现domarray不是真正的数组，而是类似节点列表，那么在这种情况下如何做forEach()。

[].forEach.call(domarray, function (elm, index) {
  // ...
});

Answer 2

可能的解决方案：获取按钮父级 - ＆gt; table cell，get row，find with .bidtextbox class，get value


bidbtn.onclick = function(){
    var bidamount = this.parentElement.parentElement.querySelector(".bidtextbox").value;
    console.log(bidamount);
}

Answer 3

找到解决方案：

1）创建一个onclick =“bid（在此处传递行号）”，并为每一行按钮设置一个id。

function tablelisting(){
    for(i=0;i<domainarray.length;i++){
        var newtr = document.createElement("tr")
        var newtd1 = document.createElement("td")
        var newtd5 = document.createElement("td")

        var bidbtn = document.createElement("button")
        var textbox = document.createElement("input")

        bidbtn.innerHTML = "Bid"
        bidbtn.setAttribute("class","btn1")
        bidbtn.setAttribute("onclick","bid("+i+")")
        bidbtn.setAttribute("id","btn"+i)


        newtr.appendChild(newtd1)
        newtd1.innerHTML = domainarray[i].domain

        newtr.appendChild(newtd5)
        newtd5.appendChild(textbox)
        newtd5.appendChild(bidbtn)



        domtable.appendChild(newtr)
    }
}

2）创建一个bid函数来获取行号，然后获取父元素的元素值：

function bid (b){
    var bidamount = document.getElementById("btn"+b).parentElement.firstChild.value;

}

Javascript在同一个函数中获取文本框值

3 个答案: