我想知道爲什麼我的代碼爲這個網站inst工作。我定義了所有的neccessarys(funtions和css),但是我仍然收到諸如「clicked is not defined」之類的錯誤,但是在它的腳本中。它應該使用JavaScript將點擊的圖像放在前面。該代碼只是改變了zindex,使它在前面。錯誤點擊功能javascript和zindex
爲什麼不能正常工作。
<!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>
你的風格標籤內的腳本標記,更改和檢查 –