임의의 이미지 클릭

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()" 
     /> 

자바 스크립트 :

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