-2
Ich habe eine Aufgabe für die Schule und ich versuche mit onclick()
Informationen über das Objekt zu zeigen. Aber es taucht nicht auf.Javascript Onclick Show Inhalt funktioniert nicht
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";
}
folgte ich ein Tutorial und es hat funktioniert für ihn, aber ich weiß nicht, was ich falsch mache. Ich hoffe, dass mir jemand helfen kann.
Mit freundlichen Grüßen Dennis
Fehlerursache table5 nicht existieren –
Oh lol, ich thougt dass would't ein großes Thema sein: D – dennis