CODEWITHSUNDEEP
javascript
washoku
washoku

Reputation: 13

While loop and innerHTML

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>

Upvotes: 0

Views: 1050

Answers (1)

T.J. Crowder
T.J. Crowder

Reputation: 1074188

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

Upvotes: 5

Related Questions