title: javascript try to find the rabbit code
body: <p>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:</p>
  
  <pre><code>    &lt;body&gt;
      &lt;div&gt;
       &lt;h1&gt;Catch the Easter Bunny to get your egg!&lt;/h1&gt;
       &lt;img src="rabbit.png" id="rabbit" onmouseover="MyFunction1()" alt="Catch the rabbit"/&gt;
       &lt;img src="rabbit.png" id="rabbit2" onmouseover="MyFunction2()" alt="Catch the rabbit"/&gt;
       &lt;img src="rabbit.png" id="rabbit3" onmouseover="MyFunction3()" alt="Catch the rabbit"/&gt;
       &lt;img src="rabbit.png" id="rabbit4" onmouseover="MyFunction4()" alt="Catch the rabbit"/&gt;
       &lt;h2 id="noeggs"&gt;No Easter Eggs for You&lt;/h2&gt;
       &lt;h2 id="yousuck"&gt;Humans suck!!!&lt;/h2&gt;
      &lt;/div&gt;
  &lt;script&gt;
      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'; 
      }
   &lt;/script&gt; 
  &lt;/body&gt;
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>     This is the html:
   &lt;body&gt;
  &lt;div&gt;
  &lt;p&gt;&lt;/p&gt;    
  &lt;h1&gt;Catch the Easter Bunny to get your egg!&lt;/h1&gt;
  &lt;img src="rabbit.png" id="r1" onmouseover="MyFunction()" alt="Catch the rabbit"/&gt;
  &lt;img src="rabbit.png" id="r2" onmouseover="MyFunction()" alt="Catch the rabbit"/&gt;
  &lt;img src="rabbit.png" id="r3" onmouseover="MyFunction()" alt="Catch the rabbit"/&gt;
  &lt;img src="rabbit.png" id="r4" onmouseover="MyFunction()" alt="Catch the rabbit"/&gt;
  &lt;img src="rabbit.png" id="r5" onmouseover="MyFunction()" alt="Catch the rabbit"/&gt;
  &lt;img src="rabbit.png" id="r6" onmouseover="MyFunction()" alt="Catch the rabbit"/&gt;
  &lt;img src="rabbit.png" id="r7" onmouseover="MyFunction()" alt="Catch the rabbit"/&gt;
  &lt;img src="rabbit.png" id="r8" onmouseover="MyFunction()" alt="Catch the rabbit"/&gt;
  &lt;img src="rabbit.png" id="r9" onmouseover="MyFunction()" alt="Catch the rabbit"/&gt;
  &lt;img src="rabbit.png" id="r10" onmouseover="MyFunction()" alt="Catch the rabbit"/&gt;
  &lt;img src="rabbit.png" id="r11" onmouseover="MyFunction()" alt="Catch the rabbit"/&gt;
  &lt;img src="rabbit.png" id="r12" onmouseover="MyFunction()" alt="Catch the rabbit"/&gt;
  &lt;img src="rabbit.png" id="r13" onmouseover="MyFunction()" alt="Catch the rabbit"/&gt;
  &lt;img src="rabbit.png" id="r14" onmouseover="MyFunction()" alt="Catch the rabbit"/&gt;
  &lt;img src="rabbit.png" id="r15" onmouseover="MyFunction()" alt="Catch the rabbit"/&gt;
  &lt;img src="rabbit.png" id="r16" onmouseover="MyFunction()" alt="Catch the rabbit"/&gt;
  &lt;img src="rabbit.png" id="r17" onmouseover="MyFunction()" alt="Catch the rabbit"/&gt;
  &lt;img src="rabbit.png" id="r18" onmouseover="MyFunction()" alt="Catch the rabbit"/&gt;
  &lt;img src="rabbit.png" id="r19" onmouseover="MyFunction()" alt="Catch the rabbit"/&gt;
  &lt;img src="rabbit.png" id="r20" onmouseover="MyFunction()" alt="Catch the rabbit"/&gt;
  &lt;h2 id="noeggs"&gt;No Easter Eggs for You&lt;/h2&gt;
  &lt;h2 id="yousuck"&gt;Humans suck!!!&lt;/h2&gt;
  &lt;/div&gt;
  &lt;script&gt;
  
  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 &lt; code; i++){
                code[i] = (int)(Math.random() * 20);
              }
          }
      }
  }
  &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>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</p>