Question

为什么这不适用于Chrome？

HTML：

<div class="deo" id="a1">
<form id="formaA1" name="formaA1">
 KOLIKO JE 3-1+5? //It`s simple equation, it says: How much is 3-1+5?
<br/>
<input type="text" id="pitanjeA1" name="pitanjeA1" />
<br/>
<button onClick="return a1();">Odgovor</button>             
</form>
</div>

CSS：

    .deo  {
    width: 24%;
    height: 30%;
    background-color: #808080;
    float: left;
    text-align: center;
    }

img {
    width: 100%;
    height: 100%;
    margin: auto;
    }

JavaScript的：

function a1() {
    if (parseInt(document.formaA1.pitanjeA1.value) == 7) {
        document.getElementById("a1").innerHTML = "<img src='zmaj_01.jpg'>";
        return true;
    } else {
        alert("Netacan odgovor. \nPokusajte ponovo.");
        return false;
    }
}

这是一个简单的程序，每次孩子都会回答正确的图片。它在FireFox和IE中运行良好，但在Chrome中它什么都不做。此外，任何批评代码的人都会受到赞赏。感谢。

Answer 1

使用.addEventListener附加您的活动，并使用event.preventDefault();阻止表单在用户点击按钮时实际提交。此外，在评论HTML代码时，请使用html评论语法“”而不是“//”

HTML：

<div class="deo" id="a1">
<form id="formaA1" name="formaA1">
 KOLIKO JE 3-1+5? <!-- It`s simple equation, it says: How much is 3-1+5? -->
<br/>
<input type="text" id="pitanjeA1" name="pitanjeA1" />
<br/>
<button id="submitButton">Odgovor</button>             
</form>
</div>

JS：

/* http://dustindiaz.com/rock-solid-addevent */
function addEvent(obj, type, fn) {
    if (obj.addEventListener) {
        obj.addEventListener(type, fn, false);
        EventCache.add(obj, type, fn);
    }

    else if (obj.attachEvent) {
        obj["e" + type + fn] = fn;
        obj[type + fn] = function() {
            obj["e" + type + fn](window.event);
        }
        obj.attachEvent("on" + type, obj[type + fn]);
        EventCache.add(obj, type, fn);
    }
    else {
        obj["on" + type] = obj["e" + type + fn];
    }
}
var EventCache = function() {
    var listEvents = [];
    return {
        listEvents: listEvents,
        add: function(node, sEventName, fHandler) {
            listEvents.push(arguments);
        },
        flush: function() {
            var i, item;
            for (i = listEvents.length - 1; i >= 0; i = i - 1) {
                item = listEvents[i];
                if (item[0].removeEventListener) {
                    item[0].removeEventListener(item[1], item[2], item[3]);
                };
                if (item[1].substring(0, 2) != "on") {
                    item[1] = "on" + item[1];
                };
                if (item[0].detachEvent) {
                    item[0].detachEvent(item[1], item[2]);
                };
                item[0][item[1]] = null;
            };
        }
    };
}();
addEvent(window, 'load', function() {
    addEvent(document.getElementById("submitButton"), "click", function(event) {
        event.preventDefault ? event.preventDefault() : event.returnValue = false;
        if (parseInt(document.formaA1.pitanjeA1.value) == 7) {
            document.getElementById("a1").innerHTML = "<img src='zmaj_01.jpg'>";
            return true;
        } else {
            alert("Netacan odgovor. \nPokusajte ponovo.");
            return false;
        }
    });
});

Live Demo | Source

Answer 2

您的问题是您正在重复使用a1 ID作为功能名称

将<div id="a1"更改为<div= id="a1Div"或更改通话和功能

<button onClick="return a1Func();">Odgovor</button>

和

function a1Func ...

以下是内联版本DEMO

<div class="deo" id="a1Div">

<button onClick="return a1(this.form);">Odgovor</button>

使用

function a1(theForm) {
  if (parseInt(theForm.pitanjeA1.value,10) === 7) {
    document.getElementById("a1Div").innerHTML="<img src='zmaj_01.jpg'>";
    return true;
  } else {
    alert("Netacan odgovor. \nPokusajte ponovo.");
    return false;
  }
}

相同版本不引人注目DEMO

<button id="testBut">Odgovor</button>

使用

window.onload=function() {
    document.getElementById("testBut").onclick=function() {
      if (parseInt(this.form.pitanjeA1.value,10) === 7) {
        document.getElementById("a1").innerHTML="<img src='zmaj_01.jpg'>";
        return true;
      } else {
        alert("Netacan odgovor. \nPokusajte ponovo.");
        return false;
      }
    }
}

简单的JavaScript在Chrome中无法使用

2 个答案: