Блог

Я пытаюсь создать функцию, которая добавляет выбранное число из <select> в td в tr с id="spelers" помощью. Но когда я запускаю его, он не работает. Кто-нибудь может сказать мне, что я делаю не так? Заранее спасибо.

Вот 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>
  

Это не работает, потому что значение, которое вы получаете от своего select , является строкой, а не числом. попробуйте изменить это:

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

к этому:

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

Вы должны попробовать это:-

 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 функции.

Это не работает, потому что у вас одинаковое имя переменной и название функции — spelers .

Что вызывает следующую ошибку

Ошибка неперехваченного типа: объект не является функцией

Любое из этих изменений устранит проблему.

ДЕМОНСТРАЦИЯ

Вы допустили одну ошибку при получении функции для добавления td в таблицу. Вам нужно иметь переменную selector внутри функции, чтобы заставить ее работать. скрипка

Фрагмент кода:

 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);
   }
}