1
Ich frage mich, warum mein Code für diese Website inst arbeiten. Ich habe alle notwendigen Funktionen (funtions und css) definiert, bekomme aber immer noch Fehler wie "click is not defined" aber im Skript ist es. Es soll das angeklickte Bild mit JavaScript in die Front bringen. Der Code ändert nur den Zindex und bringt ihn in den Vordergrund.Fehler auf angeklickte Funktionen Javascript und zindex
Warum funktioniert das nicht?
<!DOCTYPE html>
<html>
<head>
<style>
body
{
\t background-image: url("http://logar.gitastudent.online/images/background.png");
}
#img1 {
position: absolute;
left: 0px;
top: 0px;
z-index: 1;
}
#img2 {
position: absolute;
left: 10px;
top: 10px;
z-index: 1;
}
#img3 {
position: absolute;
left: 20px;
top: 20px;
z-index: 1;
}
#img4 {
position: absolute;
left: 30px;
top: 30px;
z-index: 1;
}
#img5 {
position: absolute;
left: 40px;
top: 40px;
z-index: 1;
}
#img6 {
position: absolute;
left: 50px;
top: 50px;
z-index: 1;
}
#img7 {
position: absolute;
left: 60px;
top: 60px;
z-index: 1;
}
#img8 {
position: absolute;
left: 70px;
top: 70px;
z-index: 1;
}
#img9 {
position: absolute;
left: 80px;
top: 80px;
z-index: 1;
}
#img10 {
position: absolute;
left: 90px;
top: 90px;
z-index: 1;
}
#img11 {
position: absolute;
left: 100px;
top: 100px;
z-index: 1;
}
#img12 {
position: absolute;
left: 110px;
top: 110px;
z-index: 1;
}
#img13 {
position: absolute;
left: 120px;
top: 120px;
z-index: 1;
}
#img14 {
position: absolute;
left: 130px;
top: 130px;
z-index: 1;
}
#img15 {
position: absolute;
left: 140px;
top: 140px;
z-index: 1;
}
<script>
var clicked = function(id) {
\t
\t document.getElementById("img1").style.zIndex = "1";
\t document.getElementById("img2").style.zIndex = "1";
\t document.getElementById("img3").style.zIndex = "1";
\t document.getElementById("img4").style.zIndex = "1";
\t document.getElementById("img5").style.zIndex = "1";
\t document.getElementById("img6").style.zIndex = "1";
\t document.getElementById("img7").style.zIndex = "1";
\t document.getElementById("img8").style.zIndex = "1";
\t document.getElementById("img9").style.zIndex = "1";
\t document.getElementById("img10").style.zIndex = "1";
\t document.getElementById("img11").style.zIndex = "1";
\t document.getElementById("img12").style.zIndex = "1";
\t document.getElementById("img13").style.zIndex = "1";
\t document.getElementById("img14").style.zIndex = "1";
\t document.getElementById("img15").style.zIndex = "1";
\t
\t document.getElementById(id).style.zIndex = "2";
\t
}
</script>
</style>
</head>
<body>
\t <img id="img1" src="https://i0.wp.com/www.commodore.ca/gallery/hardware/Commodore%20Educator.jpg" width="50%" height="80%" \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t onclick="clicked(this)">
\t <img id="img2" src="https://upload.wikimedia.org/wikipedia/commons/3/3b/Dysan_floppy_disk_01.jpg" width="50%" height="80%" \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t onclick="clicked(this)">
\t <img id="img3" src="https://image.freepik.com/free-photo/children-playing-on-grass_1098-504.jpg" width="50%" height="80%" \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t onclick="clicked(this)">
\t <img id="img4" src="https://afv.com/wp-content/uploads/2016/06/iccbaby_09.jpg" width="50%" height="80%" \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t onclick="clicked(this)">
\t <img id="img5" src="https://qzprod.files.wordpress.com/2016/06/rtx2fw23.jpg?quality=80&strip=all" width="50%" height="80%" \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t onclick="clicked(this)">
\t <img id="img6" src="https://img.wonderhowto.com/img/53/47/63580328862338/0/study-for-white-hat-hacker-associate-certification-cwa.1280x600.jpg" width="50%" height="80%" \t \t \t \t \t \t \t \t \t \t \t onclick="clicked(this)">
\t <img id="img7" src="https://i.ytimg.com/vi/BEDVjg5y0Hg/maxresdefault.jpg" width="50%" height="80%" \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t onclick="clicked(this)">
\t <img id="img8" src="https://upload.wikimedia.org/wikipedia/commons/3/3b/Dysan_floppy_disk_01.jpg" width="50%" height="80%" \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t onclick="clicked(this)">
\t <img id="img9" src="http://www.vintageisthenewold.com/wp-content/uploads/2015/01/PrintPreview-520x245.png" width="50%" height="80%" \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t onclick="clicked(this)">
\t <img id="img10" src="http://www.guidebookgallery.org/pics/gui/startupshutdown/splash/win95-1-1.png" width="50%" height="80%" \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t onclick="clicked(this)">
\t <img id="img11" src="http://i0.kym-cdn.com/photos/images/original/001/075/880/bb9.png" width="50%" height="80%" \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t onclick="clicked(this)">
\t <img id="img12" src="http://vignette4.wikia.nocookie.net/roblox-apocalypse-rising/images/5/59/Doge-meme-Text-Art.jpg/revision/latest?cb=20131125030607" width="50%" height="80%" \t \t \t \t \t \t \t \t \t onclick="clicked(this)">
\t <img id="img13" src="http://static1.squarespace.com/static/52e15a97e4b012e6d957fc62/5578e529e4b0204b4bc0d3c5/5907cce69de4bbccbb450a8f/1493683468194/Family-Silhouette-3.jpg?format=1000w" width="50%" height="80%" \t onclick="clicked(this)">
\t <img id="img14" src="https://mrayton.files.wordpress.com/2012/03/thecross.jpg" width="50%" height="80%" \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t onclick="clicked(this)">
\t <img id="img15" src="http://www.ecnmag.com/sites/ecnmag.com/files/3%2C5_DD_floppy_%28720_KB%29_back.jpeg" width="50%" height="80%" \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t onclick="clicked(this)">
</body>
</html>
Sie Skript-Tag in Style-Tag haben, ändern Sie es an und markieren –