4

これが 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 では何もしません。また、コードに関する批評家も歓迎します。ありがとう。

4

2 に答える 2

2

.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>​​​​​​​​​​​​​​

J:

/* 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;
        }
    });
});​

<a href="http://jsfiddle.net/ZrfAr/5/show/" rel="nofollow">ライブデモ | ソース

于 2012-12-24T09:55:43.940 に答える
0

あなたの問題は、関数名に a1 ID を再利用していることです

呼び出しと機能を変更または 変更<div id="a1"する<div= id="a1Div"

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

と

function a1Func ...

インライン版のデモはこちら

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

同じバージョンの目立たないデモ

<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;
      }
    }
}    ​
于 2012-12-24T10:23:10.107 に答える