隨機圖片點擊

Question

所以我得到了一個充滿圖像的網站，他們都是隨機的順序，每次刷新頁面。您必須搜索始終位於不同位置的圖像。

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

現在我希望在單擊該圖像時更改HTML中的第一段。我怎樣才能做到這一點？

Answer 1

你可以嘗試選擇誰擁有想要的源的圖像。

爲了便於閱讀，在段落中添加一個類或ID。

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

例

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

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

<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">

Answer 2

<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 3

假設您的第一段落在用戶點擊圖片之前存在，您可以添加一個onClick元素到您的img標籤。嘗試這樣的事情，很明顯更改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!"; 
}