Search code examples
javascriptcssgetelementbyidaddeventlistenerselectors-api

javascript try to find the rabbit code

So the exercise in the book is as follows: Try to turn this into a "catch the rabbit" game where the rabbit moves whenever you mouse over it. After 4 attempts to mouse over, it should show the "No Easter Eggs" message. After 20 attempts, it should show "Humans Suck". Create the page with a single div element with a fixed width and height and a border around it include a p element right underneath which contains an idso you can use it as output. Use the onmousemove event on the div to count how many times the event was triggered and displays the count in the p element. First off I had a mini type exercise I tried here's the code:

    <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';
    document.getElementById('rabbit3').style.visibility = 'visible';
    document.getElementById('rabbit4').style.visibility = 'visible';
    }

    function MyFunction2(){
    document.getElementById('rabbit').style.visibility = 'visible';
    document.getElementById('rabbit2').style.visibility = 'hidden';
    document.getElementById('rabbit3').style.visibility = 'visible';
    document.getElementById('rabbit4').style.visibility = 'visible';
    }

    function MyFunction3(){
    document.getElementById('rabbit').style.visibility = 'visible';
    document.getElementById('rabbit2').style.visibility = 'visible';
    document.getElementById('rabbit3').style.visibility = 'hidden';
    document.getElementById('rabbit4').style.visibility = 'visible';
    }

    function MyFunction4(){
    document.getElementById('rabbit').style.visibility = 'visible';
    document.getElementById('rabbit2').style.visibility = 'visible';
    document.getElementById('rabbit3').style.visibility = 'visible';
    document.getElementById('rabbit4').style.visibility = 'hidden'; 
    }
 </script> 
</body>

This worked fine but the actual exercise wants it into 1 function MyFunction not Myfunction1, MyFunction 2 etc... and ofcourse 20 different rabbit images and all that and if you get it within 4 tries you get the "humans sucks to appears" or if its over 20 times you get "no easter eggs for you" so then I tried the following:

     This is the html:
 <body>
<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"/>
<img src="rabbit.png" id="r3" onmouseover="MyFunction()" alt="Catch the rabbit"/>
<img src="rabbit.png" id="r4" onmouseover="MyFunction()" alt="Catch the rabbit"/>
<img src="rabbit.png" id="r5" onmouseover="MyFunction()" alt="Catch the rabbit"/>
<img src="rabbit.png" id="r6" onmouseover="MyFunction()" alt="Catch the rabbit"/>
<img src="rabbit.png" id="r7" onmouseover="MyFunction()" alt="Catch the rabbit"/>
<img src="rabbit.png" id="r8" onmouseover="MyFunction()" alt="Catch the rabbit"/>
<img src="rabbit.png" id="r9" onmouseover="MyFunction()" alt="Catch the rabbit"/>
<img src="rabbit.png" id="r10" onmouseover="MyFunction()" alt="Catch the rabbit"/>
<img src="rabbit.png" id="r11" onmouseover="MyFunction()" alt="Catch the rabbit"/>
<img src="rabbit.png" id="r12" onmouseover="MyFunction()" alt="Catch the rabbit"/>
<img src="rabbit.png" id="r13" onmouseover="MyFunction()" alt="Catch the rabbit"/>
<img src="rabbit.png" id="r14" onmouseover="MyFunction()" alt="Catch the rabbit"/>
<img src="rabbit.png" id="r15" onmouseover="MyFunction()" alt="Catch the rabbit"/>
<img src="rabbit.png" id="r16" onmouseover="MyFunction()" alt="Catch the rabbit"/>
<img src="rabbit.png" id="r17" onmouseover="MyFunction()" alt="Catch the rabbit"/>
<img src="rabbit.png" id="r18" onmouseover="MyFunction()" alt="Catch the rabbit"/>
<img src="rabbit.png" id="r19" onmouseover="MyFunction()" alt="Catch the rabbit"/>
<img src="rabbit.png" id="r20" onmouseover="MyFunction()" alt="Catch the rabbit"/>
<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);

    document.getElementById('r1').style.visibility = "hidden";
    document.getElementById('r2').style.visibility = "hidden";
    document.getElementById('r3').style.visibility = "hidden";
    document.getElementById('r4').style.visibility = "hidden";
    document.getElementById('r5').style.visibility = "hidden";
    document.getElementById('r6').style.visibility = "hidden";
    document.getElementById('r7').style.visibility = "hidden";
    document.getElementById('r8').style.visibility = "hidden";
    document.getElementById('r9').style.visibility = "hidden";
    document.getElementById('r10').style.visibility = "hidden";
    document.getElementById('r11').style.visibility = "hidden";
    document.getElementById('r12').style.visibility = "hidden";
    document.getElementById('r13').style.visibility = "hidden";
    document.getElementById('r14').style.visibility = "hidden";
    document.getElementById('r15').style.visibility = "hidden";
    document.getElementById('r16').style.visibility = "hidden";
    document.getElementById('r17').style.visibility = "hidden";
    document.getElementById('r18').style.visibility = "hidden";
    document.getElementById('r19').style.visibility = "hidden";
    document.getElementById('r20').style.visibility = "hidden";

    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>
</body>

I've tried many times to do this but, even when I have the visbility hidden all my rabbits show. I don't know what's wrong with the program I've tried at least ten different attempts. This is a report because someone of my previous post basically spammed it with his own opinions which had nothing to do with my programming and problem. which I am trying to understand. I'm guessing maybe my for loop will not detect an array through querySelector('img'); and also I've use a css file to hidethe humsn suck and what not with color:white if your wondering. my addEventListener I think is also a problem. Please help and make me understand what is wrong with my script. to make this work. Again please do not comment upon opinions of my coding just answers that may help me to solve this problem I'm having. thank you

Solution

  • This worked fine but the actual exercise wants it into 1 function MyFunction not Myfunction1, MyFunction 2 etc... and ofcourse 20 different rabbit images and all that

    So instead of this:

    function MyFunction1(){
    document.getElementById('rabbit').style.visibility = 'hidden';
    document.getElementById('rabbit2').style.visibility = 'visible';
    document.getElementById('rabbit3').style.visibility = 'visible';
    document.getElementById('rabbit4').style.visibility = 'visible';
}

    What you want to do is pass it an input variable to your function. You define the input like this:

    function MyFunction(inputVariable){

    and then when you later call the function, you will pass in some value to it;

    onmouseover="MyFunction(1)"

    So in this specific call of the function, inputVariable will be equal to 1. If you later called it as MyFunction(7), inputVariable would be equal to 7.

    By providing an input variable, we can change the behavior of our function:

    if(inputVariable == 1){
    document.getElementById('rabbit').style.visibility = 'hidden';
} else {
    document.getElementById('rabbit').style.visibility = 'visible';
}

    etc.

    As for getting your CSS effects to work properly, I see two main culprits;

    1. Some of your function names are misspelled. This is something that will cause an error, so to verify if you have things spelled correctly, simply check your developer tools! For most browsers, you can access the console by pressing the F12 key on your keyboard, then go to the "console" tab on the window that shows up. If an error occurs in your code (such as a spelling mistake) it should show up there and make you aware of the problem.

    2. In a few cases, you use document.get style commands which return arrays. If you're not yet familiar with arrays, I would suggest doing some research on them, as they are very important. You will need to use a for loop in order to go through every item of those arrays and apply the CSS style that you want.

    Hope this helps you. :)