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。我确实在 Internet 上找到了很多关于此的内容，但没有一个真正有效。

Answer 1

好的，以下是将解决方案打包成一个答案：

我遇到了两个问题：

第一个是，XML 中的属性名称不能以数字开头。我通过简单地在前面添加一个字母来解决这个问题，我可以稍后使用替换功能删除字符串。

第二个问题是IE8没有Array函数indexOf()。谢谢你 555k 在这里的帮助，你给了我最后一块拼图。我写了一个适合我情况的小解决方法：

var exist = -1;
var needle = form.elements[field].name;
for (var i=0;i<counter;i++){
    if (artarray[i].indexOf(needle) != -1){
        exist = i;
    }
}

这正是我想要的，所以它适用于我的问题。当然，它不能解决老浏览器不存在“indexOf()”的问题，但也许有人可以使用它。

Answer 2

在你的脚本代码中检查我的修改

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

Array 的 ie8 indexOf() 方法会报错。 Check this

Answer 3

我认为问题与将“this”传递给函数有关。它似乎正在传递按钮。

尝试替换

var form = obj.form;

与

var form=document.forms[0]

并忽略对“obj”的引用