2016-12-10 16 views
-2

私は学校の課題があり、そのオブジェクトに関する情報を表示するにはonclick()としています。しかし、それは現れていません。javascript onclickはコンテンツが正常に動作しないことを示します

HTML

<!DOCTYPE html> 
<html> 
    <head> 
     <title>IGS-Plattegrond</title> 
     <link rel="stylesheet" href="css/MyCSS.css"> 
     <script src="js/main.js"></script> 
    </head> 
    <body> 
     <section> 
      <div class="map"> 
       <img src="images/plattegrond.jpg" alt="IGS Plattegrond" usemap="#igsmap"> 
       <map name="igsmap"> 
<!--  De knoppen op de Plattegrond   --> 
        <area shape="rect" coords="522,263,542,285" alt="stand 1" href="#" onclick='show(1);'> 
        <area shape="rect" coords="458,311,479,334" alt="stand 2" href="#" onclick='show(2);'> 
        <area shape="rect" coords="458,213,477,232" alt="stand 3" href="http://www.google.nl"> 
        <area shape="rect" coords="587,315,606,335" alt="stand 4" href="http://www.google.nl"> 
        <area shape="rect" coords="586,214,605,231" alt="stand 5" href="http://www.google.nl"> 
        <area shape="rect" coords="522,167,542,188" alt="stand 6" href="http://www.google.nl"> 
        <area shape="rect" coords="523,125,540,142" alt="stand 7" href="http://www.google.nl"> 
        <area shape="rect" coords="237,126,251,141" alt="stand 8" href="http://www.google.nl"> 
        <area shape="rect" coords="192,319,207,332" alt="stand 9" href="http://www.google.nl"> 
        <area shape="rect" coords="266,303,280,319" alt="stand 10" href="http://www.google.nl"> 
        <area shape="rect" coords="228,407,246,424" alt="stand 11" href="http://www.google.nl"> 

       </map> 
      </div> 
      <div class="info"> 
       <h2 class="text-center">IGS Interactieve plattegrond</h2> 
       <h3 class="text-center">gebruiksaanwijzing</h3> 
       <p class="text-center"> Click op een stand nummer m informatie optehalen </p> 
       <a href="#" onclick='show(1);'>Table 1</a> 

      <div id="table1"> Content of 1 </div> 
      <div id="table2"> Content of 2 </div> 
      <div id="table3"> Content of 3 </div> 
      <div id="table4"> Content of 4 </div>  


      </div> 
     </section> 

    </body> 

</html> 

CSS

section { 
    width:80%; 
    height:100%; 
    margin:auto; 
} 
.map { 
    width:45%; 
    float:left; 
    margin-right:5%; 
} 
.info { 
    float:right; 
    width:45%; 
    margin-left:5%; 
} 
.text-center { 
    text-align:center; 
} 

#table1, #table2, #table3, #table4, #table5 { 
    display: none; 
} 

私はチュートリアルの後、それが仕事をしたのjavascript

function show(nr) { 
    document.getElementById("table1").style.display="none"; 
    document.getElementById("table2").style.display="none"; 
    document.getElementById("table3").style.display="none"; 
    document.getElementById("table4").style.display="none"; 
    document.getElementById("table5").style.display="none"; 
    document.getElementById("table"+nr).style.display="block"; 
} 

彼のために私は間違って何をしているのか分からない。私は誰かが私を助けることを願っています。 D:

敬具デニス

+1

エラー原因表5は一切笑ああ、私はそれが大きな問題になることwould't thougt –

+0

存在して存在していません – dennis

答えて

0

表5なしは

function show(nr) { 
 
    document.getElementById("table1").style.display="none"; 
 
    document.getElementById("table2").style.display="none"; 
 
    document.getElementById("table3").style.display="none"; 
 
    document.getElementById("table4").style.display="none"; 
 
    //table5 no exist document.getElementById("table5").style.display="none"; 
 
    document.getElementById("table"+nr).style.display="block"; 
 
}
section { 
 
    width:80%; 
 
    height:100%; 
 
    margin:auto; 
 
} 
 
.map { 
 
    width:45%; 
 
    float:left; 
 
    margin-right:5%; 
 
} 
 
.info { 
 
    float:right; 
 
    width:45%; 
 
    margin-left:5%; 
 
} 
 
.text-center { 
 
    text-align:center; 
 
} 
 

 
#table1, #table2, #table3, #table4, #table5 { 
 
    display: none; 
 
}
<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <title>IGS-Plattegrond</title> 
 
     <link rel="stylesheet" href="css/MyCSS.css"> 
 
     <script src="js/main.js"></script> 
 
    </head> 
 
    <body> 
 
     <section> 
 
      <div class="map"> 
 
       <img src="images/plattegrond.jpg" alt="IGS Plattegrond" usemap="#igsmap"> 
 
       <map name="igsmap"> 
 
<!--  De knoppen op de Plattegrond   --> 
 
        <area shape="rect" coords="522,263,542,285" alt="stand 1" href="#" onclick='show(1);'> 
 
        <area shape="rect" coords="458,311,479,334" alt="stand 2" href="#" onclick='show(2);'> 
 
        <area shape="rect" coords="458,213,477,232" alt="stand 3" href="http://www.google.nl"> 
 
        <area shape="rect" coords="587,315,606,335" alt="stand 4" href="http://www.google.nl"> 
 
        <area shape="rect" coords="586,214,605,231" alt="stand 5" href="http://www.google.nl"> 
 
        <area shape="rect" coords="522,167,542,188" alt="stand 6" href="http://www.google.nl"> 
 
        <area shape="rect" coords="523,125,540,142" alt="stand 7" href="http://www.google.nl"> 
 
        <area shape="rect" coords="237,126,251,141" alt="stand 8" href="http://www.google.nl"> 
 
        <area shape="rect" coords="192,319,207,332" alt="stand 9" href="http://www.google.nl"> 
 
        <area shape="rect" coords="266,303,280,319" alt="stand 10" href="http://www.google.nl"> 
 
        <area shape="rect" coords="228,407,246,424" alt="stand 11" href="http://www.google.nl"> 
 

 
       </map> 
 
      </div> 
 
      <div class="info"> 
 
       <h2 class="text-center">IGS Interactieve plattegrond</h2> 
 
       <h3 class="text-center">gebruiksaanwijzing</h3> 
 
       <p class="text-center"> Click op een stand nummer m informatie optehalen </p> 
 
       <a href="#" onclick='show(1);'>Table 1</a> 
 

 
      <div id="table1"> Content of 1 </div> 
 
      <div id="table2"> Content of 2 </div> 
 
      <div id="table3"> Content of 3 </div> 
 
      <div id="table4"> Content of 4 </div>  
 

 

 
      </div> 
 
     </section> 
 

 
    </body> 
 

 
</html>

関連する問題