2012-02-02 3 views
2

ID가 'headercontent'인 div가 있고 사용자 시스템에서 javascript가 활성화되어 있으면 다른 사용자들과 링크를 작성할 수있는 스크립트가 있습니다. 뿐만 아니라 사용자가 자바 스크립트를 사용할 수없는 경우를 대비하여 noscript를 사용하여 백업을 수행합니다.document.createElement/document.body.appendChild div 작성/작성 안함

코드가 잘 실행되고 'a'요소가 실행될 때 작성되지만 문제는 코드가 실행되는 div에 기록되지 않는다는 것입니다. 'headercontent'div 외부에서 코드를 작성하고 클래스 스타일은 렌더링 된 코드로 작성되었지만 완전히 완료되었습니다. 나는 요소에 스타일 속성을 추가하고 필요할 경우 javascript로 작성할 수 있기 때문에 스타일/클래스에 대해 너무 걱정하지 않지만이 div 외부의 코드를 작성하는 이유에 대해 더 염려합니다.

내 코드는 다음과 같습니다

<div id="headercontent"> 
    hey, this is a div. 
    <a href="#" class="button">This is a link</a> 
    <a href="#" class="button">This is another link</a> 

    <script type="text/javascript"> 
     writeask() 
     function writeask() { 
     var writeaskbox = document.createElement('a'); 
     writeaskbox.href = 'javascript:askbox()'; 
     writeaskbox.className = 'button'; 
     writeaskbox.innerHTML = 
      ['Ask'].join(' ') 
     document.body.appendChild(writeaskbox); 
     } 

     function askbox(){ 
     var askbox = document.getElementById('askbox') 
     if (askbox.style.display == 'none') { 
      askbox.style.display = 'block' 
      askbox.style.height = '150px'    
     } else { 
      askbox.style.display = 'none' 
      askbox.style.height = '0px' 
     } 
     } 
    </script> 
    <noscript><a href="/ask" class="button">Ask</a></noscript> 
</div> 

어떻게이 그것을 실행 동일한 DIV의 요소를 만들 수있는 writeask() 함수를받을 수 있나요? 최종 출력되도록 :

<div id="headercontent"> 
    hey, this is a div. 
    <a href="#" class="button">This is a link</a> 
    <a href="#" class="button">This is another link</a> 
    <a href="javascript: askbox()" class="button">Ask</a> 
</div> 

대신 : 나는 오히려 지금은 의아해 해요 그래서

<div id="headercontent"> 
    hey, this is a div. 
    <a href="#" class="button">This is a link</a> 
    <a href="#" class="button">This is another link</a> 
</div> 
<a href="javascript: askbox()" class="button">Ask</a> 

나는 아직도 자바 스크립트와 초보자입니다. 누군가가 도울 수 있으면, 그것은 잘 평가 될 것입니다.

미리 감사드립니다. 단. 대신

document.body.appendChild(writeaskbox); 

사용하는 모든

document.getElementById("headercontent").appendChild(writeaskbox); 

답변

3

최초의

+0

대단히 고맙습니다. 스크립트의 순서 오류로 지적 했으므로 답변을 수락하겠습니다. 이것은 완벽하게 작동했습니다. –

+0

@Shad 나는 그것에 대해 읽을 것이고, 대단히 감사한다. –

+1

@DanS 함수 - 함수 호출 순서는 문제가되지 않습니다. JavaScript 함수 정의를 지정된 범위의 맨 위로 올립니다. – Shad

3

, 당신은 writeask() 함수가 그렇게 존재하기 전에,이 경우에 당신이 그것을 다른 방법으로 주위를해야 호출된다. 이

document.getElementById("headercontent").appendChild(writeaskbox); 
+0

정말 고마워요! –

1

대신

document.body.appendChild(writeaskbox); 
해야로서,

function writeask() {} 
function askbox(){} 

writeask(); 

다음은 몸

document.body.appendChild(writeaskbox); 

하지 사업부에 추가됩니다 그것은해야한다

다음 작업을 수행해야합니다.

document.getElementById('headercontent').appendChild(writeaskbox); 
+0

정말 고마워요! –