Question

I have a code that doesn’t only work in IE. everything works fine on other browsers, the error that occurs in IE is this

Line: 11
Error: Function expected

this is the fiddle, you can copy paste it as you wish, I really don’t know what do. I have no idea why it doesn’t work at all
http://jsfiddle.net/laupkram/TDWd6/

Code:

<form name="formx">
   <input type="text" name="txtMultiplier">
   <input type="button" value="LOOP!" onClick="loop()">
</form>

<script>
function loop(){
    var mynumbers = [0,1,2,3,4,5,6,7,8,9,10];
    var num = parseInt(document.formx.txtMultiplier.value);

    document.write("Simulating For Loop<br>");
    for(var i = 0; i < mynumbers.length; i++){
        var prod = num * mynumbers[i];
        document.write(mynumbers[i].toString() + " x " + num.toString() + "=" +  (prod).toString() + "<br>");       
    }

    document.write("<br>");

    document.write("Simulating Do While<br>");
    var i = 0;
    do{
       var prod = num * mynumbers[i];
       document.write(mynumbers[i].toString() + " x " + num.toString() + "=" +  (prod).toString() + "<br>");
       i++;    
    }while(i < mynumbers.length);

    document.write("<br>");

    document.write("Simulating While<br>");
    var i = 0;
    while(i < mynumbers.length){
       var prod = num * mynumbers[i];
       document.write(mynumbers[i].toString() + " x " + num.toString() + "=" +  (prod).toString() + "<br>");
       i++;
    }
}
</script>
​

Answer 1

Not sure why, but loop seams to be like some magic name. According to this demo, loop is not a function when clicked. It is a property of <input type="button"/> element which calls a loop function. In onclick this points to an element itself and loop is a property of it equal to 1. That is why it fails with error. Possible fix: change onclick="loop()" to onclick="window.loop()"

For instance, here it starts working in IE, but document.write destroy all previouse DOM/JS and it stops execution after first document.write execution.

It will be better if you will use something like on demo below (results are stored in temporary variable which is next passed to innerHTML of res div):
http://jsfiddle.net/TDWd6/5/

function loop1(){
    var mynumbers = [0,1,2,3,4,5,6,7,8,9,10];
    var num = parseInt(document.formx.txtMultiplier.value);
    var res = "Simulating For Loop<br>";
    for(var i = 0; i < mynumbers.length; i++){
        var prod = num * mynumbers[i];
        res += mynumbers[i].toString() + " x " + num.toString() + "=" +  (prod).toString() + "<br>";
    }

    res += "<br>";

    res += "Simulating Do While<br>";
    var i = 0;
    do{
       var prod = num * mynumbers[i];
       res += mynumbers[i].toString() + " x " + num.toString() + "=" +  (prod).toString() + "<br>";
       i++;    
    }while(i < mynumbers.length);

    res += "<br>";

    res += "Simulating While<br>";
    var i = 0;
    while(i < mynumbers.length){
       var prod = num * mynumbers[i];
       res += mynumbers[i].toString() + " x " + num.toString() + "=" +  (prod).toString() + "<br>";
       i++;
    }
    document.getElementById("res").innerHTML = res;
}

Also, for some reason, even this code does not work in IE when function name is loop (in code and demo above it is called loop1). See demo with code like above, but with function called loop: http://jsfiddle.net/TDWd6/5/