CODEWITHSUNDEEP
javascripthtml
Max Ruigewaard
Max Ruigewaard

Reputation: 45

How to add a selected number of TD's with JavaScript?

I am trying to make a function that adds the selected number from the <select> in td's to the tr with id="spelers". But when I run it it doesn't work. Could someone tell me what I am doing wrong? Thanks in advance.

Here's the 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>

And this is the 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);
    }
}

Upvotes: 0

Views: 53

Answers (5)

V31
V31

Reputation: 7666

You made one mistake in getting the function to add td to the table. You need to have the selector variable inside the function in order to make it to work. fiddle

Code Snippet:

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

Upvotes: 1

jdabrowski
jdabrowski

Reputation: 1985

You need to get the selected value inside the spelers() function. If you get the value outside of the spelers() function you'll get the initial value, not the actualy selected one.

Another thing: you need to convert the selected value from string to integer to be able to iterate on it.

Another thing: spelers variable and spelers function have the same name, therefore when defining spelers function it replaces spelers variable. You should use different names.

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

Also it would be a good idea to add first option with no value, so a user can actually select the first option with a value to run the spelers() function. Like this:

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

Upvotes: 1

T J
T J

Reputation: 43166

It's not working because you're variable name and function name are the same - spelers.

Which causes the following error

Uncaught TypeError: object is not a function

Changing any of this will fix the issue.

Demo

Upvotes: 1

Mritunjay
Mritunjay

Reputation: 25892

You should try this:-

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

I think you should get selection in spelers function.

Upvotes: 1

Dirk
Dirk

Reputation: 2144

It doesn't work because the value you get from your select is a string, and not a number. try changing this:

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

to this:

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

Upvotes: 1

Related Questions