아무 것도 표시하지 않습니다. 루프별로 모든 div를 표시하고 표시 할 Perticular div를 표시합니다.

Question

Javascrip을 사용하고 있으며 모든 div를 숨기고 싶은 곳에 다음과 같은 기능이 있습니다. 하지만 왜이 코드가 작동하지 않는지 모르겠다. 아무도 이것으로 나를 도울 수 있습니까?

Javasvript

function showDiv(divTag,id) 
    { 
    var i; 
     for(i=1;i<7;i++) 
    { 
     document.getElementById(divTag+i).style.display = 'none'; 
    } 
     document.getElementById(divTag+id).style.display = 'block'; 
    } 

또는

function showDiv(divTag,id) 
{ 
    var i; 
    for(i=1;i<5;i++) 
{ 
    var tempDiv = divTag + i; 
    document.getElementById(tempDiv).style.display = 'none'; 
} 
document.getElementById(divTag+id).style.display = 'block'; 
} 

그리고 HTML

<a href="#" onClick="showDiv(\"hide_\",1)">Show Only Div1</a> 
    <div id="hide_1"> 
    Abc 
    </div> 
    <a href="#" onClick="showDiv(\"hide_\",2)">Show Only Div2</a> 

    <div id="hide_2"> 
    BCD 
    </div> 
<a href="#" onClick="showDiv(\"hide_\",3)">Show Only Div2</a> 

    <div id="hide_3"> 
    EDF 
    </div> 
<a href="#" onClick="showDiv(\"hide_\",4)">Show Only Div2</a> 

    <div id="hide_4"> 
    FGE 
    </div> 

내가 시도했지만 할 실패한 abov 과정 모두 그

Answer 1

<a href="#" onClick="showDiv("hide_",1)">Show Only Div1</a> 

,536,

자바 스크립트 구문 오류가 발생합니다. 이

<a href="#" onClick="showDiv('hide_',1)">Show Only Div1</a> 

주위

Answer 2

여러 가지 "hide_"를 따옴표를 확인해야한다 :

1. "onclick" (안 "onClick") 모두 HTML에 클릭 이벤트 처리기를 할당하는 올바른 방법입니다 및 JavaScript.
2. 첫번째 함수의 for(i=1;i<7;i++) 행에서 1에서 6까지 반복하지만, html에는 4 개의 요소 만 있습니다. 존재하지 않는 다섯 번째에 도달하면 코드에서 오류가 발생합니다. "TypeError : null의 속성 'style'을 읽을 수 없습니다.
3. @verisimilitude가 언급했듯이 같은 방식으로 인용 된 다른 텍스트 안에 따옴표로 묶인 텍스트를 넣는 구문 오류가 있습니다. onclick="showDiv('hide_',1)"이어야합니다. 'hide_'주변의 작은 따옴표에 유의하십시오.

다음은 작동하는 코드입니다. Click here to see it in action. 또한

// Please note that it must be in the global scope 
// otherwise you won't be able to call it from your html. 

function showDiv(divTag, id) { 
    var i; 
    for (i = 1; i < 5; i++) { 
    var tempDiv = divTag + i; 
    document.getElementById(tempDiv).style.display = 'none'; 
    } 
    document.getElementById(divTag+id).style.display = 'block'; 
} 

, 그들을 보여주는/숨기기 전에 요소의 존재를 사전이-의 유효성을 검사하는 another working version of your code를 살펴 :

다음은 자바 스크립트 기능입니다. 따라서 여러분은 여러분의 for 루프가 제거 된 요소들을 반복적으로 반복하는 것에 대해 걱정할 필요가 없습니다.

그리고 여기 당신의 HTML의 :

<a href="#" onclick="showDiv('hide_', 1);">Show Only Div1</a> 
<div id="hide_1">Div1</div> 

<a href="#" onclick="showDiv('hide_', 2);">Show Only Div2</a> 
<div id="hide_2">Div2</div> 

<a href="#" onclick="showDiv('hide_', 3);">Show Only Div3</a> 
<div id="hide_3">Div3</div> 

<a href="#" onclick="showDiv('hide_', 4);">Show Only Div4</a> 
<div id="hide_4">Div4</div>​