javascript - 简单的 JavaScript 在 Chrome 中不起作用

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;
    }
}​

这是一个简单的程序，每次 child 回答正确的图像都会出现。它在 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