【发布时间】：2016-02-07 16:10:56
【问题描述】：
我创建了一个数组，当我按下按钮时显示随机图像，每张图片都有onclick 动作。
我希望onclick 操作在我单击所需图像时显示警报，但我不确定如何修复我的代码？
编辑1：
HTML
<!DOCTYPE html>
<html>
<head>
<script src = "ProjectJ.js"></script>
</head>
<body>
</body>
<form name="imageForm">
<table border=3>
<tr>
<td>
<input onclick="displayImage0();" type=button value="Display Random Image">
</td>
</tr>
<tr>
<td>
<img src="batman.jpg" name="img" onclick="displayImage()"/>
<img src="bell.jpg" name="img1" onclick="displayImage1()"/>
<img src="candy.jpg" name="img2" onclick="displayImage2()"/>
</td>
<tr>
<td>
<img src="shirt.jpg" name="img3" onclick="displayImage3()"/>
<img src="chess.jpg" name="img4" onclick="displayImage4()"/>
<img src="flower.jpg" name="img5" onclick="displayImage5()"/>
</td>
</tr>
<tr>
<td>
<img src="horse.jpg" name="img6" onclick="displayImage6()"/>
<img src="key.jpg" name="img7" onclick="displayImage7()"/>
<img src="horse.jpg" name="img8" onclick="displayImage8()"/>
</td>
</tr>
</tr>
</table>
</form>
</html>
JS
var imagesArray = ["batman.jpg", "bell.jpg", "candy.jpg", "chess.jpg", "flower.jpg", "horse.jpg", "key.jpg","shirt.jpg","tower.jpg"];
function displayImage0(){
var num = Math.floor(Math.random() * 9);
document.img.src = imagesArray[num];
var num = Math.floor(Math.random() * 9)
document.img1.src = imagesArray[num];
var num = Math.floor(Math.random() * 9)
document.img2.src = imagesArray[num];
var num = Math.floor(Math.random() * 9)
document.img3.src = imagesArray[num];
var num = Math.floor(Math.random() * 9)
document.img4.src = imagesArray[num];
var num = Math.floor(Math.random() * 9)
document.img5.src = imagesArray[num];
var num = Math.floor(Math.random() * 9)
document.img6.src = imagesArray[num];
var num = Math.floor(Math.random() * 9)
document.img7.src = imagesArray[num];
var num = Math.floor(Math.random() * 9)
document.img8.src = imagesArray[num];
var num = Math.floor(Math.random() * 9)
}
function displayImage(){
var num = Math.floor(Math.random() * 9);
document.img.src = imagesArray[num];
}
function displayImage1(){
if (document.img1.src=="flower.jpg")
{
window.alert("FLOWER!");
}
//alert when clicked and flower is here
}
function displayImage2(){
//alert messsage when clicked and tower is here
}
function displayImage3(){
// alert message when clicked and key is here
}
function displayImage4(){
//alert mesasge when clicked and horse is here
}
function displayImage5(){
// alert message when clicked and chess is here
}
function displayImage6(){
// alert message when clicked and shirt is here
}
function displayImage7(){
// alert message when clickd and batman is here
}
function displayImage8(){
// alert message when and candy is here
}
【问题讨论】：
-
删除 displayImage0() 中除第一个
var之外的所有内容。您还面临哪些其他问题？ DisplayImage1 看起来不错 -
@Gavriel 当花朵图像出现并且我按下它时它不会显示警报
-
然后通过在函数中添加：
alert(document.img1.src);来调试它。它显示了什么？ -
它说的是花朵图像的位置，但它没有说“FLOWER！”
-
花卉图像的 onclick 调用
displayImage5()但是如果它是一朵花，您的警报代码在displayImage1()
标签： javascript jquery html function onclicklistener