JavaScript 초보자가 여기 있습니다. 문제 해결을 도와 줄 수 있습니까?

나는이 코드를 작동 시키려고 노력하고 있으며 나는 왜 그렇게되지 않을지 이해할 수 없다. 나는 JSlint와 모든 것을 시도했다. 초보자 질문에 대해 유감스럽게 생각합니다. 자바 스크립트로 2 시간 미만을 소비 했으므로 문제가 될 수 있습니다. 감사.JavaScript 초보자가 여기 있습니다. 문제 해결을 도와 줄 수 있습니까?

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <link rel="stylesheet" type="text/css" href="Style/demo.css" /> 
    <script type="text/javascript"> 
     window.onload = init; 
function init() { 
      document.getElementById("s1").onclick = print(1); 
      document.getElementById("s2").onclick = print(2); 
      document.getElementById("s3").onclick = print(3); 
      document.getElementById("s4").onclick = print(0); 
} 

     function print(printno) { 
     var demo = document.getElementById("demo"); 

     switch(printno) 
     { 
     case 1: 
     demo.innerHTML= "It is a period of civil war. Rebel spaceships, striking from a hidden base, have won their first victory against the evil Galactic Empire. "; 
     break; 
     case 2: 
     demo.innerHTML = "During the battle, Rebel spies managed to steal secret plans to the Empire's ultimate weapon, the Death Star, an armored space station with enough power to destroy an entire planet."; 
     break; 
     case 3: 
     demo.innerHTML = "Pursued by the Empire's sinister agents, Princess Leia races home aboard her starship, custodian of the stolen plans that can save her people and restore freedom to the galaxy...."; 
     break; 
     case 0: 
     demo.innerHTML = "A long time ago, in a galaxy far, far away.."; 
     break; 
     } 
} 

    </script> 
</head> 
<body> 
    <div id="demo"> 
     A long time ago, in a galaxy far, far away.. 
    </div> 
    <ul> 
     <li><span id ="s1">Part 1</span></li> 
     <li><span id="s2">Part 2</span></li> 
     <li><span id="s3">Part 3</span></li> 
     <li><span id="s4">Reset</span></li> 
</ul> 
</body> 
</html>

출처

2013-03-09 Cam Murray

무엇이 오류입니까 –

잘 모르겠습니다! 이것이 내가 묻는 이유입니다. –

@CamMurray 그가 묻는 것은 다음과 같습니다.이 코드가 무엇을 기대하며, 대신 정확하게 발생하는 것은 무엇입니까? –

이 같은 것을 할 때 : 온 클릭 이벤트에 다음 실제로 주어진 매개 변수 print() 함수를 호출하는

document.getElementById("s1").onclick = print(1); 
document.getElementById("s2").onclick = print(2); 
document.getElementById("s3").onclick = print(3); 
document.getElementById("s4").onclick = print(0);

하고 (실제로 undefined이다) 그 함수의 결합 결과입니다.

document.getElementById("s1").onclick = function(){ print(1) }; 
document.getElementById("s2").onclick = function(){ print(2) }; 
document.getElementById("s3").onclick = function(){ print(3) }; 
document.getElementById("s4").onclick = function(){ print(0) };

이 당신의 print() 함수를 호출하는 기능을 첨부 할 것 : 나는 당신이하고 싶었던 것은이 같은 생각.

출처

2013-03-09 07:40:50

http://jsfiddle.net/zjvnR/ – Antony

Antony에게 감사드립니다! 나는 그 수정이 어떻게 작동 하는지를 확신하지 못했지만 나의 문제는 사라졌다. 나는 약간의 독서를 할 것이다. 매우 감사합니다! –

@CamMurray 기본적으로 document.getElementById ("s1"). onclick = print'와'document.getElementById ("s1"). onclick = print (1)'을 쓰는 것과는 차이가 있습니다. 첫 번째 경우에는 모든 것이 괜찮습니다. 이벤트 핸들러에 함수를 지정합니다 (단, 매개 변수를 전달하지 않아도 됨). 두 번째 경우에는 ** 처음 ** 함수를 호출하고 ** 해당 ** 호출의 결과를 이벤트 처리기에 할당합니다. –

JavaScript 초보자가 여기 있습니다. 문제 해결을 도와 줄 수 있습니까?

답변

관련 문제