Question

Why isn’t this working in 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;
    }
}​

It`s a simple program, everytime child answers correct piece of image appears.
It works fine in FireFox and IE, but in Chrome it does nothing.
Also, any critics on code is appreciated.
Thanks.

Answer 1

Use .addEventListener to attach your event, and event.preventDefault(); to prevent the form from actually submitting when the user clicks on the button.
Also, when commenting HTML code, use the html comment syntax “<!-- -->” instead of “//“

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