Javascript innerHTML이 onclick 함수를 호출합니다.

Question

링크를 클릭하여 DIV를 표시 할 때 링크의 텍스트를 변경하려고합니다. 사용자가 수정 된 링크 (동일한 링크)를 클릭하면 DIV를 숨겨야합니다.

그것은 보여주는 것과 함께 작동하지만, "이전 뉴스 숨기기"를 클릭하면 DIV가 0.5 초 동안 숨겨져 다시 표시됩니다.

그것은 내가 기본 하나에 링크의 텍스트를 변경하고있어 라인에서 발생 ("보기 오래된 뉴스 ...")

<script>function showoldnews() 
     { 
      document.getElementById('oldnews').style.display = "block"; 
      document.getElementById('oldnewslinkid').innerHTML = '<a href="#" id="oldnewslinkid" onclick="hideoldnews(); return false;">Hide older news</a>'; 

     } 
     function hideoldnews() 
     { 
      document.getElementById('oldnewslinkid').innerHTML = '<a href="#" id="oldnewslinkid" onclick="showoldnews(); return false;">View older news...</a>'; //it calls showoldnews() function for some reason on this line 
      document.getElementById('oldnews').style.display = "none"; 
     } 
     </script> 

링크

<a href="#" id="oldnewslinkid" onclick="showoldnews(); return false;">View older news...</a> 

Answer 1

나는 이것이 믿는다 첫 번째 링크 안에 두 번째 링크를 삽입하고 click 이벤트가 하위 앵커 대신에 부모 앵커에 대해 실행 중이기 때문에 발생합니다.

마크 업 :

1. 포함 사업부에 컨트롤을 감싸 및 innerHTML
2. 이의 두 세트를 포함 자사에 새 앵커를 추가 :

   <a href="#" id="oldnewslinkid" onclick="showoldnews(); return false;"> 
       <a href="#" id="oldnewslinkid" onclick="hideoldnews(); return false;">Hide older news</a> 
       </a> 
   

   몇이 주위에 방법이 있습니다 로드시 dom의 컨트롤을 CSS를 통해 hideOldNews() 컨트롤을 숨기고 js를 통해 전환 할 수 있습니다.

3. <div id="oldnews">Old News...</div> 
   <a href="oldnews" id="toggle">View older news...</a> 
   

   JS

   var toggle = document.getElementById('toggle') 
   
   toggle.addEventListener('click', function(e){ 
       e.preventDefault() 
       var target = document.getElementById("oldnews"); // href="oldnews" 
   console.log(target); 
   
       target.style.display = (target.style.display == 'none') ? 'block' : 'none'; 
   
   }); 
   

   codepen

에게

HTML : N 이벤트 하나 요소에 리스너 및 사용이 뉴스 DIV "전환"하는

제 제안은 HTML 요소 내부에 중첩 된 단일 행 JS를 편집 할 필요가 없으므로 이벤트 핸들러를 사용하는 것이 더 간단 할 것입니다. addEventListener에는 약간의 브라우저 간 문제가 있습니다 (IE8은 특별한 attachEvent 핸들러를 사용합니다). 비트를 얻기 위해 간단한 ways이 있습니다.