자바 스크립트 onclick

Question

자바 스크립트에 문제가 있습니다. 일부 콘텐츠를 내가 가지고있는 것 위에 올리는 버튼을 만들려고합니다. 이 작업을 수행 할 수있는 몇 가지 기능을 만들었습니다. 스크립트가 이미로드되어있는 경우 HTML 페이지에서 함수를 테스트하면 완벽하게 작동하지만 onclick 이벤트를 사용하여 함수를 호출하면 내용이 포함 된 완전히 새로운 .html 페이지가 만들어집니다.

내가 만든 페이지를 저장했기 때문에 원본을 보았고 body 태그에 작성된 javascript 함수의 내용이있는 빈 페이지 였기 때문에이 사실을 알고 있습니다.

여기에 HTML이 있습니다.

  <ul class="sub-menu"> 
       <li onclick='articleRead("test", DeviantArtUpdateContent)'><a href="#Deviant Art Update">Deviant Art Update</a></li> 
       <li><a href="#">'Triumph At Last' Album Preview</a></li> 
       <li><a href="#">Short Funny and Stupid</a></li> 
       <li><a href="#">Project Preview</a></li> 

      </ul> 

<div id="aID"></div> 

다음은 자바 스크립트입니다. 난 그냥 내가 의도 한 방식으로 작동하는 onclick 이벤트없이 HTML 문서에있는 함수를 호출,하지만 난 그것을 클릭하면 온 클릭 이벤트를 추가하는 빈 문서를 만드는 경우

function articlePopUp (title , content) { 
document.write('<div class="backgroundFade"></div>'); 
document.write('<div class="articlePosition"><div class="closeArticle">Close</div>'); 
document.write('<div class="articleRead">'); 
document.write('<h1>'); 
document.write(title); 
document.write('</h1>'); 
document.write('<div class="grey-line"></div>'); 
document.write(content); 
document.write('</div></div>'); 
} 
function articleRead (title, content) { 
    document.getElementById("aID").innerHTML=articlePopUp(title,content); 
} 

내가 전에 말했듯이. 필자는 의도 한 div id로 기존 문서에 함수를 작성하려고합니다. 사전에 도움을 주셔서 감사합니다, 이건 정말 저를 곤란하게합니다.

Answer 1

document.write 페이지가로드 된 후에 페이지가 호출되면 전체 페이지가 비어있게됩니다. 대신 innerHTML을 사용하고 싶을 것입니다.

function articlePopUp(title , content) { 
    htmlContent = ''; 
    htmlContent += '<div class="backgroundFade"></div>'; 
    htmlContent += '<div class="articlePosition"><div class="closeArticle">Close</div>'; 
    htmlContent += '<div class="articleRead">'; 
    htmlContent += '<h1>'; 
    htmlContent += title; 
    htmlContent += '</h1>'; 
    htmlContent += '<div class="grey-line"></div>'; 
    htmlContent += content; 
    htmlContent += '</div></div>'; 
    return htmlContent; 
} 
function articleRead (title, content) { 
    document.getElementById("aID").innerHTML = articlePopUp(title,content); 
} 

Answer 2

페이지로드가 완료되면 닫음 상태가됩니다.

닫힌 문서에서 document.write을 호출하면 암시 적으로 document.open이 호출되어 새 문서가 시작됩니다.

어쨌든 articlePopUp 안에있는 문서에 내용을 추가하고 싶지 않습니다. 해당 반환 값을 innerHTML 속성에 할당하려고합니다. 명시 적 반환 값이 없기 때문에 undefined입니다 (상기 이유로 인해 요소가 존재하지 않습니다).

문자열을 작성하여 리턴하십시오.

var html = '<div class="backgroundFade"></div>'; 
html = html + '<div class="articlePosition"><div class="closeArticle">Close</div>'; 
// etc 
return html; 

더 나은

아직 createElement, createTextNode, appendChild 친구 사용합니다.