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

자바 스크립트 : 이미지의

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();을 사용하십시오.

<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를 : 또한 HTML 코드를 주석 때, 대신 "//"

html로의 HTML 주석 구문 "<!-- -->"를 사용

/* 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

귀하의 문제는 통화 및 기능

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

및

function a1Func ...

을 <div= id="a1Div"에 함수 이름

변경 <div id="a1"의 A1 ID를 다시 사용하거나 변경하는 것입니다

다음은 인라인입니다. 눈에 거슬리지

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

같은 버전을 사용 rsion DEMO

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

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

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