javascript - 如何使用JavaScript添加选定数量的TD？

我试图做一个函数，将td中<select>中选定的数字添加到带有id="spelers"的tr中。但是，当我运行它时，它不起作用。有人可以告诉我我做错了吗？提前致谢。

这是HTML：

<select id="speler_select" onchange="spelers()">
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
</select>

<table>
    <tr id="spelers"></tr>
</table>

这是JavaScript：

// number of players
var speler_select = document.getElementById("speler_select");
var aantal_spelers = speler_select.options[speler_select.selectedIndex].value;

var spelers = document.getElementById("spelers");

function spelers() {

    for (var x = 0; x < aantal_spelers; x++) {
        var td = document.createElement("td");
        spelers.appendChild(td);
        spelers.lastChild.innerHTML = "Speler " + (x + 1);
    }
}

最佳答案

您需要在spelers()函数中获取选定的值。如果在spelers()函数之外获得值，则将获得初始值，而不是实际选择的值。

另一件事：您需要将选定的值从字符串转换为整数，以便可以对其进行迭代。

另一件事：spelers变量和spelers函数具有相同的名称，因此在定义spelers函数时它将替换spelers变量。您应该使用其他名称。

var speler_select = document.getElementById("speler_select");
var spelers_e = document.getElementById("spelers");
function spelers() {
    var aantal_spelers = parseInt(speler_select.options[speler_select.selectedIndex].value, 10);
    for (var x = 0; x < aantal_spelers; x++) {
        var td = document.createElement("td");
        spelers_e.appendChild(td);
        spelers_e.lastChild.innerHTML = "Speler " + (x + 1);
    }
}

另外，最好添加不带任何值的第一个选项，因此用户实际上可以选择带值的第一个选项来运行spelers()函数。像这样：

<select ...>
  <option value=''>Add spelers</option>
  <!-- other options here -->
</select>