Error: Function expected Internet Explorer

问题:

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>
​

回答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/

回答2:

I'm pretty sure the problem is document.write. Internet Explorer doesn't preserve the JavaScript from the document when you destroy it (by implicitly calling document.open by calling document.write after the DOM is ready), and the functions you call in the loop no longer exist.

Use createElement / createTextNode / appendChild and friends instead of document.write.

回答3:

This works in ie9 on my local. But fails on jsfiddle for some reason. Gotta love IE.

<form name="formx">
   <input type="text" name="txtMultiplier">
   <input type="button" id="test" value="LOOP!" >
</form>

<script>
document.getElementById('test').onclick = function(){
    loop();
};

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>