자바 스크립트 클릭

나는 아래 그림 어떤 식으로 뭔가를 구현하기 위해 노력하고 원하는대로 작동하지 않는; 버튼처럼 보이는 div가 클릭되면 세부 정보가 표시됩니다. 인라인 자바 스크립트뿐만 아니라 외부 JavaScript 파일을 사용하고 있습니다. 내 문제는 첫 번째 div를 클릭하면 세부 정보가 표시된다는 것입니다. 하지만 다른 div를 클릭해도 아무 일도 일어나지 않습니다.자바 스크립트 클릭

<html> 
<head> 
<title>Crash Test</title> 
    <link href="css/style.css" type="text/css" rel="stylesheet"> 
    <script src="javascript/functions.js" type="text/javascript"></script> 

    </head> 
    <body> 
     <fieldset> 
      <legend>Mobile Phones</legend> 
      <table width="100%"> 
       <tbody> 
        <tr> 
         <td> 
          <script language="javascript"> 
           var secArray = new Array(); 
           secArray = ["Asus","HTC","Apple","Samsung","Nokia"]; 

           for(var secCnt=1;secCnt<=secArray.length;secCnt++){ 
            document.write('<div class="allSections currentSectionSelected" id="s">'); 
            document.write('<div href="javascript:void(0);" class="tooltip tooltipSelected">'); 
            document.write('<div style="text-overflow:ellipsis;width:92%;overflow:hidden;white-space:nowrap; padding:5px;font-weight: bold;" onclick="javascript:setSecName('+secCnt+',secArray);">'); 
            document.write(secArray[secCnt-1]); 
            document.write('</div>'); 
            document.write('</div>'); 
            document.write('</div>'); 
           } 
          </script> 
         </td> 
        </tr> 
        <tr> 
         <td> 
          <script type="text/javascript"> 
           for(var secCnt=1;secCnt<=secArray.length;secCnt++){ 
            if(secCnt == CurrentSection){ 
             document.write('<div id="viewSection'+secCnt+'" style="display:block">You are viewing all about <b>'+secArray[secCnt-1]+'</b> mobile phone: <br><br>'); 
            } 
            else{ 
             document.write('<div id="viewSection'+secCnt+'" style="display:none;">You are viewing all about <b>'+secArray[secCnt-1]+'</b> mobile phone: <br><br>'); 
            } 
           } 
          </script> 

         </td> 
        </tr> 
       </tbody> 
      </table> 
     </fieldset> 
    </body> 
    </html>

그리고 내 외부 자바 스크립트 파일의 코드는 다음과 같습니다 :

내 HTML 코드는

var CurrentSection =1; 

function setSecName(sectioncount,sa){ 
    CurrentSection=sectioncount; 

    load_details(sa); 
} 

function load_details(sa){ 
    var secArray =sa; 
    for(var secCnt=1;secCnt<=secArray.length;secCnt++){ 
     if(secCnt == CurrentSection){ 
      document.getElementById('viewSection'+secCnt).style.display = "block"; 
     }else{ 
      document.getElementById('viewSection'+secCnt).style.display = "none"; 
     } 
    } 
}

내가 자바 스크립트 only.Please가 나를 도울 사용하여 위의 기능을 수행하고자합니다. 미리 감사드립니다.

ent

출처

2015-02-01 gomesh munda

문제의 수수께끼를 제공 할 수 있습니까? –

문제는 당신이 닫히지 않은 세부 정보 DIV 요소를 왼쪽이다. 수정 코드 : 나는 위의 코드에 </div>를 추가

for (var secCnt = 1; secCnt <= secArray.length; secCnt++) { 
    if (secCnt == CurrentSection) { 
     document.write('<div id="viewSection' + secCnt + '" style="display:block">You are viewing all about <b>' + secArray[secCnt - 1] + '</b> mobile phone: <br><br></div>'); 
    } else { 
     document.write('<div id="viewSection' + secCnt + '" style="display:none;">You are viewing all about <b>' + secArray[secCnt - 1] + '</b> mobile phone: <br><br></div>'); 
    } 
}

참고.

또한 document.write 렌더링 및 정보를 표시하는 가장 좋은 방법은 아닙니다. 아마도 일부 정적 요소를 사용하거나 document.createElement 및 appendChild 메서드를 사용하여 동적으로 요소를 만들어야합니다.

출처

2015-02-01 16:18:35 dfsq

'dfsq'는 백만 번이나 고맙습니다. 당신은 나를 미쳐 버리지 못하게했습니다. 어리석은 사람들이었습니다. 나는 닫히지 않은 div를 눈치 채지 못했습니다. 대단합니다 !!!!! :) –

아무 문제 없어, 다행히 도왔습니다! – dfsq

자바 스크립트 클릭

답변

관련 문제