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

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

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

这是内联版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;
      }
    }
}    ​
于 2012-12-24T10:23:10.107 回答