Can you try turning this exercise into a "rabbit catching" game where the rabbit moves when you hover over it? After 4 tries, display a message saying "No Easter Eggs". After 20 attempts, show "Humans Suck". Design the page with a single div element with fixed dimensions and a border. Add a p element underneath with an id for output purposes. Use the onmousemove event to count how many times the event was triggered and show the count in the p element. Here's a code snippet I tried:
<body>
<div>
<h1>Catch the Easter Bunny to get your egg!</h1>
<img src="rabbit.png" id="rabbit" onmouseover="MyFunction1()" alt="Catch the rabbit"/>
<img src="rabbit.png" id="rabbit2" onmouseover="MyFunction2()" alt="Catch the rabbit"/>
<img src="rabbit.png" id="rabbit3" onmouseover="MyFunction3()" alt="Catch the rabbit"/>
<img src="rabbit.png" id="rabbit4" onmouseover="MyFunction4()" alt="Catch the rabbit"/>
<h2 id="noeggs">No Easter Eggs for You</h2>
<h2 id="yousuck">Humans suck!!!</h2>
</div>
<script>
function MyFunction1(){
document.getElementById('rabbit').style.visibility = 'hidden';
document.getElementById('rabbit2').style.visibility = 'visible';
// other functions omitted for brevity
}
// other functions omitted for brevity
</script>
</body>The above code worked but the task requires using a single function (not multiple ones like MyFunction1, MyFunction2, etc.) and having 20 different rabbits displayed. If caught within 4 tries, show "humans suck"; otherwise, if attempted more than 20 times, show "No Easter Eggs". I then attempted the following solution:
This is the html:
<div>
<p></p>
<h1>Catch the Easter Bunny to get your egg!</h1>
<img src="rabbit.png" id="r1" onmouseover="MyFunction()" alt="Catch the rabbit"/>
<img src="rabbit.png" id="r2" onmouseover="MyFunction()" alt="Catch the rabbit"/>
// more img elements...
<h2 id="noeggs">No Easter Eggs for You</h2>
<h2 id="yousuck">Humans suck!!!</h2>
</div>
<script>
function MyFunction(){
document.getElementByTagNames('img').addEventListener('mouseover', onmouse);
// visibility settings for all img elements...
var code = document.querySelectorAll('img');
function onmouse(){
if(code == (document.querySelectorAll('img').style.visibility = 'visible')){
for(i = 0; i < code; i++){
code[i] = (int)(Math.random() * 20);
}
}
}
}
</script>
I've made several attempts, but even with hidden visibility, all my rabbits are still showing. I suspect issues with detecting arrays through querySelector('img') in my for loop. Additionally, I used a CSS file to hide certain messages with white text color. The addEventListener might also be problematic. Can someone please help me understand what's wrong with my script? I'd appreciate straightforward solutions rather than critiques of my coding style. Thank you!