태그에 document.getElementById (someid) .onclick을 사용할 수 있습니까?

Question

javascript 함수 onclick을 호출하려고합니다. 나는 그것이 작동 onclick을 내부에 태그를 작성하는 경우 내가? 내가 readPage 함수를 호출하는 것을 시도하고 있지만이 작동하지 않는이

<script type="text/javascript"> 
    function readPage(){ 
     alert("Hello"); 
    } 

    document.getElementById('read').onclick=readPage; 
</script> 

<a id="read" href="">read</a> 

같은 것을 쓴하지만 제가 위에서 쓴 방법은 작동하지 않습니다. 왜?

Answer 1

. 로드되기 전에 DOM (like running getElementById())에 액세스 할 수 없습니다. 가장 쉬운 것은이 같은 window.onload 안에 당신의 코드를 실행하는 것입니다 :

window.onload = function() { 
    document.getElementById("read").onclick=readPage; 
}; 

Answer 2

먼저

1. 앵커에 href="#"을 확인 앵커의 기본 방향 프로토콜 (즉, 이동이 HREF을하지)를 해제해야합니다.
2. event.preventDefault() 기능 예제 here을 확인하십시오.

Answer 3

당신은해야한다 : 당신이 때 그것을 할,하지만 방법에 대한 아무 문제가 없습니다

<script type="text/javascript"> 
    function readPage(){ 
     alert("Hello"); 
    } 

    document.getElementById('read').onclick=readPage; 
</script> 

<a id="read" href="#">read</a> 

Answer 4

그것은 (다음 페이지의 현재 URL이 사용됩니다) 빈 href 속성 와 함께 작동하지만 당신이 사용해야합니다, 이미 언급했듯이 window.onload을 클릭 처리기에 연결하거나a 요소 다음에 script 블록 을 이동해야합니다.

그렇지 않으면 getElementById은 DOM 트리에 아직 존재하지 않기 때문에 요소를 찾을 수 없습니다.

<a id="read" href="">read</a> 

<script type="text/javascript"> 
    function readPage(){ 
     alert("Hello"); 
     return false; 
    } 

    document.getElementById('read').onclick=readPage; 
</script> 

이미 언급했듯이. return false; 브라우저를 만들려면 이 아닌 URL을 따르십시오. URL을 href="#"으로 변경하면 브라우저가 페이지를 맨 위로 스크롤하기 때문에이를 필요로 할 수도 있습니다.

테스트 스스로 : http://jsfiddle.net/Nj4Dh/1/

---

이 traditional event registration model에 대해 자세히 알아보십시오.

Answer 5

실제로 브라우저를 사용하지 않는 두 가지 방법이 있습니다. 그렇지 않은 경우 HREF의 URL 그게 전부로 이동하려고합니다, 나는 당신이 링크의 기본 동작을 중지하는 데 필요한 stopDefault 기능 SD를 사용했습니다

<script type="text/javascript"> 
    function stopDefault(e) 
    { 
     if (e && e.preventDefault) 
     { 
      e.preventDefault(); 
     } 
     else 
     { 
      window.event.returnValue = true; 
     } 
     return false; 
    } 

    function readPage(event){ 
     alert("Hello"); 

     return stopDefault(event);//prevent default action 
    } 

</script> 
<a id="read" href="#" onclick="readPage(event)">read</a> 

: 하나는

<script type="text/javascript"> 

    function stopDefault(e) //cross browser function for stopping default actionw 
    { 
     if (e && e.preventDefault) 
     { 
      e.preventDefault(); 
     } 
     else 
     { 
      window.event.returnValue = true; 
     } 
     return false; 
    } 

    function readPage(event){ 
     alert("Hello"); 

     return stopDefault(event);//prevent default action 
    } 



    window.onload = function(event){ 

     document.getElementById('read').onclick=readPage; 


    } 
</script> 

<a id="read" href="#">read</a> 

또는이다 .