Javascript 使用“单击”创建带有随机图像的数组_Javascript_Jquery_Html_Function_Onclicklistener

Javascript 使用“单击”创建带有随机图像的数组

javascript jquery html function

Javascript 使用“单击”创建带有随机图像的数组,javascript,jquery,html,function,onclicklistener,Javascript,Jquery,Html,Function,Onclicklistener,我创建了一个数组，当我按下一个按钮时，它会显示随机图像，并且每个图片都有onclick操作我希望单击所需图像时，onclick操作显示警报，但我不确定如何修复代码编辑1： HTML <!DOCTYPE html> <html> <head> <script src = "ProjectJ.js"></script> </head> <body> </body> <

我创建了一个数组，当我按下一个按钮时，它会显示随机图像，并且每个图片都有

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>

花图像的

onclick

调用

displayImage5（）

，但是，如果它是花，则发出警报的代码位于

displayImage1（）

我问你document.img1.src警报是什么！它从不提醒“FLOWER”的原因是，当您将“FLOWER.jpg”分配给img.src，并将其读回时，它会提供完整的URL：

document.img1.src=“flower.jpg”；
警告（“第1课：”+document.img1.src+”！=“flower.jpg”）；
if（document.img1.src==“flower.jpg”）{
窗户。警惕（“花！”）；
}否则{
注意（“不是花！”）；
}
如果（document.img2.src==”http://example.com/cow.jpg") {
窗口。警报（“奶牛！”）；
}
document.img2.src=”http://example.com/cat.jpg";
如果（document.img2.src==”http://example.com/cat.jpg") {
窗口。警报（“猫！”）；
}

删除displayImage0（）中除第一个

var

之外的所有内容。你还面临哪些其他问题？DisplayImage1外观OK@Gavriel当花卉图像出现时，它不会显示警报，我按下它，然后通过添加：

alert（document.img1.src）对其进行调试以及该函数。它显示了什么？它显示了花图像的位置，但仍然没有显示“花！”花图像的onclick调用displayImage5（）
，但是你的警告代码是在displayImage1（）中，但是他首先点击了“Display Random image”按钮，然后他点击显示花的图片。好吧，我的建议是使用完整的URL-s，而不是“flower.jpg”，因为我已经尝试了使用.src的所有方法，所以建议在if语句中写什么。到处都是！将其分配给src的位置，以及比较的位置。只需将数组更改为“”即可，。。。在其中，并确保您还与完整URL进行比较。您犯了一个错误。现在看我的演示，它清楚地显示了它的工作原理。
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


}