随机图片点击

Question

因此，每次刷新页面时，我都会看到一个充满图像的网站，它们都是随机排列的。您必须搜索始终位于不同位置的图像。

function randomWaldo() {
var randomNummer = Math.floor((Math.random() * 100) + 1);
document.getElementsByTagName('img')[randomNummer].src = "images/waldo.jpg";}

现在，我想要在单击该图像时更改HTML中的第一段。我怎么能这样做？

Answer 1

<script type="text/javascript" >
var images = document.getElementsByTagName('img');
//find all paragraphs
var paragraphs = document.getElementsByTagName('p');
//define function called on click
function changeParagraph() {
  //change first paragraph if exists
  if(paragraphs.length) {
        paragraphs[0].innerHTML = 'I have been changed!';
  }
}
/*
for(var i = 0; i < images.length; i++) {
    //set onclick event to every image
    images[i].onclick = changeParagraph;
}
*/
// set onclick to the randomImage
images[randomNumber].onclick = changeParagraph;
</script>

Answer 2

假设您的第一个段落在用户点击图片之前存在，您可以在img标记中添加onClick元素。尝试这样的事情，明显改变你自己的图片的URL：

 <p id = "first">You haven't found Waldo
</p>
     <img id = "waldo" src = https://pbs.twimg.com/profile_images/561277979855056896/4yRcS2Zo.png 
        onclick = "addparagraph()"
        />

JavaScript：

function addparagraph(){
    document.getElementById("first").innerHTML = "you found Waldo!";
}

Answer 3

您可以尝试选择拥有所需来源的图片。

为了便于阅读，在段落中添加一个类或ID。

document.querySelectorAll("img[src='images/waldo.jpg']")[0].onclick=function()
{
document.getElementById("paragraphid").innerHTML="You win";
};

示例

＆＃13;

＆＃13;

document.querySelectorAll("img[src='image/waldo.jpg']")[0].onclick=function()
{
  document.getElementById("rep").innerHTML="you win !";
}

＆＃13;

img{
  height:100px;
  width:100px;
  }

＆＃13;

<p id="rep"></p>
<img src="image/nok.jpg" alt="nok">
<img src="image/nok.jpg" alt="nok">
<img src="image/nok.jpg" alt="nok">
<img src="image/waldo.jpg" alt="waldo">
<img src="image/nok.jpg" alt="nok">

＆＃13;

＆＃13;

＆＃13;