Question

当我按下按钮时，我创建了一个显示随机图像的数组，每张图片都有onclick个动作。

我希望onclick操作在我点击我想要的图片时显示提醒，但我不知道如何修复我的代码？

EDIT1：

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


}

Answer 1

花卉图片的onclick会调用displayImage5()但是您的代码是警告它是否是一朵花是displayImage1()

Answer 2

我问你document.img1.src提醒了什么！它永远不会警告“FLOWER”的原因是因为当您将“flower.jpg”分配给img.src时，如果您将其读回来，它会为您提供完整的URL：

document.img1.src = "flower.jpg";
alert("Lesson1: '"+ document.img1.src + "' != 'flower.jpg'");


if (document.img1.src=="flower.jpg") {
  window.alert("FLOWER!");
} else {
  window.alert("NOT FLOWER!");
}

if (document.img2.src=="http://example.com/cow.jpg") {
  window.alert("COW!");
}

document.img2.src = "http://example.com/cat.jpg";
if (document.img2.src=="http://example.com/cat.jpg") {
  window.alert("CAT!");
}

<img src="bell.jpg" name="img1"/>
<img src="http://example.com/cow.jpg" name="img2"/>

使用点击随机图像的数组

2 个答案: