Javascript 在 IE 中以错误的表单字段显示 NaN - 适用于 Firefox 和 Chrome

Question

我正在尝试设置一个小型文章选择器。虽然它在 Firefox 和 Chrome 以及 IE7 中工作，但在 IE8 和 IE9 上有问题。

• 在 IE 8 和 9 中，单击时“增加”字段会更改为“NaN”。 (编辑:通过在数字前面放置一个字母来解决)
• 在 IE9 中，它会更新“Warenkorb”，但会在
  中放置“NaN”或“\/”“Anzahl”字段。 (编辑:通过在数字前面放置一个字母来解决)
• 在IE8中它完全忽略了更新功能。 (编辑:与innerHTML-Bug有关)

对我来说，似乎我无法到达表单本身。我已经尝试使用 document.forms[0] 和 document.getElementById["bestmult"] 代替，以防传递的对象不是表单内的字段，但这并没有改变任何事情。我觉得解决方案很简单，但我就是无法具体说明。

这是代码:

<script>
        var sumarray = new Array();
        var artarray = new Array();
        var costarray = new Array();
        var counter=0;

    function increase(obj, field, type){
        var form = obj.form;
        var value = parseInt(form.elements[field].value, 10);
        value++;
        form.elements[field].value = value;
        updateCosts(obj, field, type);
    }
    function decrease(obj, field, type){
        var form = obj.form;
        var value = parseInt(form.elements[field].value, 10);
        if(value > 0){
            value--;
            form.elements[field].value = value;
            updateCosts(obj, field, type);
        }
    }

    function updateCosts(obj, field, type){
        var form = obj.form;

        var exist = artarray.indexOf(form.elements[field].name);

        var preis = 0;
        if (type == 'b'){
            preis = 19.95; 
        }else if (type == 'p') {
            preis = 29.95;
        }

        if (exist != -1){
            if (form.elements[field].value == 0){
                sumarray.splice(exist , 1);
                artarray.splice(exist , 1);
                costarray.splice(exist , 1);
                counter--;
            }else {     
                sumarray[exist] = form.elements[field].value;
                artarray[exist] = form.elements[field].name;
                costarray[exist] = preis;
            }
        }else { 
            sumarray[counter] = form.elements[field].value;
            artarray[counter] = form.elements[field].name;
            costarray[counter] = preis;
            counter++;
        }

        var completestring = "";

        if (counter > 0) {
            var product = 0;
            completestring += "<h1>Warenkorb</h1><table border=0><tr style='background:gray;' align='center'><td width=110 align='center'>Artikel</td><td width=80>Anzahl</td><td align='center' width=60>Preis</td><td align='center' width='40'>Del</td></tr>";

            for(var i=0;i<counter;i++){
                completestring += "<tr><td>"+artarray[i].replace("_", " ")+"</td><td align=center>"+sumarray[i]+"</td><td align=center>"+costarray[i]+"</td><td align=center><img src='img/trash.png' onclick='setZero(\""+artarray[i]+"\")'></td></tr>";
                product += parseInt(sumarray[i])*parseInt(costarray[i]);

            }
            completestring += "</table><h2>"+(product).toFixed(2)+"</h2>";
        } else {
            completestring += "<h1>Warenkorb</h1>";

        }

        document.getElementById("sum").innerHTML = completestring;
    }

    function setZero(element) {
        var form = document.forms[0];   
        form.elements[element].value = "0";
        var obj = form.elements[element];
        updateCosts(obj, element, "b");

    }
</script>
<div id="sum">
</div>
<form id="bestmult" action="test2.html" method="post">
<table cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td rowspan="2"><input type="text" name="1_Basis" value="0" onblur="updateCosts(this, '1_Basis', 'b')" /></td>
        <td><input type="button" value=" /\ " onclick="increase(this, '1_Basis', 'b')" class="button" ></td>
    </tr><tr>
        <td><input type="button" value=" \/ " onclick="decrease(this, '1_Basis', 'b')" class="button" ></td>
    </tr>
</table>

这段代码当然不是所有的东西(尽管所有可能影响手头问题的东西)，所以不要担心脚本标签或不完整的形式，这些只是为了完成而添加的，以显示如何一切都可以组合在一起，而无需发布整个代码。

编辑:IE8和9似乎对我通过文本字段命名的方式有问题。我可以通过简单地在开头放置一个 z 来解决大部分问题，稍后我可以简单地删除它以恢复正确的文本。现在只是IE8似乎不喜欢innerHTML。我确实在互联网上找到了很多这方面的内容，但没有什么真正有效的。

Answer 1

检查我对脚本代码的修改

<script>
        var sumarray = new Array();
        var artarray = new String();
        var costarray = new Array();
        var counter=0;

    function increase(obj, field, type){
        var form1 = obj.form;
        //alert(obj.form1.elements[0].value);
        var value = parseInt(form1.elements(field).value, 10);
        value++;
        form1.elements(field).value = value;
        updateCosts(obj, field, type);
    }
    function decrease(obj, field, type){
        var form = obj.form;
        var value = parseInt(form.elements(field).value, 10);
        if(value > 0){
            value--;
            form.elements(field).value = value;
            updateCosts(obj, field, type);
        }
    }

    function updateCosts(obj, field, type){
        var form = obj.form;

        var exist = artarray.indexOf(form.elements(field).name);

        var preis = 0;
        if (type == 'b'){
            preis = 19.95; 
        }else if (type == 'p') {
            preis = 29.95;
        }

        if (exist != -1){
            if (form.elements(field).value == 0){
                sumarray.splice(exist , 1);
                artarray.splice(exist , 1);
                costarray.splice(exist , 1);
                counter--;
            }else {     
                sumarray[exist] = form.elements(field).value;
                artarray[exist] = form.elements(field).name;
                costarray[exist] = preis;
            }
        }else { 
            sumarray[counter] = form.elements(field).value;
            artarray[counter] = form.elements(field).name;
            costarray[counter] = preis;
            counter++;
        }

        var completestring = "";

        if (counter > 0) {
            var product = 0;
            completestring += "<h1>Warenkorb</h1><table border=0><tr style='background:gray;' align='center'><td width=110 align='center'>Artikel</td><td width=80>Anzahl</td><td align='center' width=60>Preis</td><td align='center' width='40'>Del</td></tr>";

            for(var i=0;i<counter;i++){
                completestring += "<tr><td>"+artarray[i].replace("_", " ")+"</td><td align=center>"+sumarray[i]+"</td><td align=center>"+costarray[i]+"</td><td align=center><img src='img/trash.png' onclick='setZero(\""+artarray[i]+"\")'></td></tr>";
                product += parseInt(sumarray[i])*parseInt(costarray[i]);

            }
            completestring += "</table><h2>"+(product).toFixed(2)+"</h2>";
        } else {
            completestring += "<h1>Warenkorb</h1>";

        }

        document.getElementById("sum").innerHTML = completestring;
    }

    function setZero(element) {
        var form = document.forms[0];   
        form.elements[element].value = "0";
        var obj = form.elements[element];
        updateCosts(obj, element, "b");

    }
</script>

对于 ie8 indexOf() 方法，Array 会出错。 Check this