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的问题与我用textfields命名的方式有关。我可以通过简单地在开头放一个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>

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

Answer 2

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

尝试替换

var form = obj.form;

与

var form=document.forms[0]

并忽略对“obj”的引用

Answer 3

好的，所以这里的解决方案包含在一个答案中：

我遇到了两个问题：

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

第二个问题是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（）”问题的解决方案，但也许有人可以使用它。

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

3 个答案: