Question

我正在尝试创建一个函数，将所选的数字从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);
    }
}

Answer 1

它不起作用，因为从select获得的值是一个字符串，而不是一个数字。尝试改变这个：

var aantal_spelers = speler_select.options[speler_select.selectedIndex].value;

到此：

var aantal_spelers = parseInt(speler_select.options[speler_select.selectedIndex].value);

Answer 2

您需要在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>

Answer 3

你应该试试这个： -

function spelers() {
    var speler_select = document.getElementById("speler_select");
    var aantal_spelers = speler_select.options[speler_select.selectedIndex].value;

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

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

我认为您应该在spelers函数中进行选择。

Answer 4

它不起作用，因为您的变量名称和函数名称相同 - spelers。

导致以下错误

未捕获的TypeError：对象不是函数

更改任何一项都可以解决问题。

Demo

Answer 5

在获取将td添加到表中的函数时出了一个错误。您需要在函数内部使用选择器变量才能使其工作。 fiddle

代码段：

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

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

5 个答案: