Javascript在IE中显示错误形式的NaN -适用于Firefox和chrome



我正在尝试设置一个小文章选择器。虽然它可以在Firefox和Chrome以及IE7上运行,但在IE8和IE9上存在问题。

  • 在ie8和ie9中,当点击时,"增加"字段变为"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>

这段代码当然不是所有的东西(尽管所有的东西都可能影响到手头的问题),所以不要为脚本标签或不完整的表单而烦恼,这些只是为了完成而添加的,以显示它们是如何组合在一起的,而不必发布整个代码。

edit:似乎IE8和ie9对我通过文本字段命名的方式有问题。我可以通过简单地在开头放一个z来解决大部分问题,然后我可以简单地去掉它以恢复正确的文本。现在只是IE8似乎不喜欢innerHTML。我在网上找到了很多关于这方面的东西,但是没有一个是真正有效的

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

<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将给出错误。检查这个

我认为这个问题与传递"this"到函数有关。它好像在传递按钮。

尝试更换

var form = obj.form;

var form=document.forms[0]
并忽略对"obj"的引用

好了,下面是一个答案:

我面临两个问题:

第一个错误是,XML中的属性名不能以数字开头。我通过简单地在前面添加一个字母来解决这个问题,我可以使用replace-function将其删除。

第二个问题是IE8没有数组函数indexOf()。谢谢你在这里的帮助,你给了我最后一块拼图。我写了一个小的变通方法,适合我的情况:

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()"的问题,但也许有人可以使用它。

最新更新