While loop and innerHTML

Question

I'm not sure if there is something wrong with my while loop or the innerHTML section of my code but I'm not able to show the drop down lists in the div tags when the submit button is clicked. Can anyone see whats wrong with it.

<html>
<head>
<script type="text/javascript">

function getvalue() {
 number = document.getnumber.input.value;
 document.getElementById("result").value = number; 
} 
</script>

</head>
<body>

<script>
function generatedropdown() {
html = '<select name="select" id="i">';
while (i < number)  {            
html+='<option>Test 1</option>';
html+='<option>Test 2</option>';
html+='<option>Test 3</option>';
html+='<option>Test 4</option>';
html+='<option>Test 5</option>';        
i++;
}
html+='</select>';
document.getElementById("my-output").innerHTML = html;
}
</script>


<form name="getnumber">
Input number: <input type="text" name="input">
<input type="button" value="Next" onClick="getvalue()">
</form>


<form id="showlists">
Number entered: <input type="text" id="result" readonly="readonly">     
<input type="button" value="Show lists" onClick="generatedropdown()">
<div id="my-output">Generated List:</div>
</form>
</body>
</html>

When you are calling generatedropdown, number variable is not defined. — sdespont
– sdespont, Commented Feb 17, 2013 at 10:43
It should be defined after calling getvalue, but that still dosen't work. — washoku
– washoku, Commented Feb 17, 2013 at 10:46

T.J. Crowder · Accepted Answer · 2013-02-17 10:53:26Z

A few problems:

You've never set an initial value for i, so the code will throw an error, since you're trying to read the value of a global that you've never set or declared.
You're relying on getvalue having been called to initialize number, which I wouldn't count on.
You're relying on implicit string -> number conversion, which I don't recommend; use parseInt to parse numbers supplied by users.
(Optional) Your loop is exactly what the for construct is designed for, rather than while (although while would work if you initialized i).
You're falling prey to The Horror of Implicit Globals because you're never declaring your variables.

I suggest reading a good primer or tutorial on JavaScript, to master the basics.

Here's a minimal update:

function generatedropdown() {
    // Declare your variables
    var html, i, number;

    // Get the number, and convert it from a decimal string
    // to a number explicitly rather than relying on implicit
    // coercion
    number = parseInt(document.getvalue.input.value, 10);

    // Probably bail if it's not a number
    if (isNaN(number)) {
        return;
    }

    // (Optional, but you were doing it) Show the number
    document.getElementById("result").value = number;

    // Build your HTML
    html = '<select name="select" id="i">';

    // This is exactly what `for` loops are for
    for (i = 0; i < number; ++i) {
        html+='<option>Test 1</option>';
        html+='<option>Test 2</option>';
        html+='<option>Test 3</option>';
        html+='<option>Test 4</option>';
        html+='<option>Test 5</option>';        
    }
    html+='</select>';
    document.getElementById("my-output").innerHTML = html;
}

Collectives™ on Stack Overflow

While loop and innerHTML

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related