javascript 尝试寻找兔子代码

Question

所以书中的习题如下：试着把它变成一个 "catch the rabbit" 游戏，当你将鼠标悬停在它上面时，兔子就会移动。在 4 次尝试将鼠标悬停后，它应该显示 "No Easter Eggs" 消息。尝试 20 次后，它应该显示 "Humans Suck"。使用具有固定宽度和高度的单个 div 元素创建页面，它周围的边框包括一个 p 元素，该元素正下方包含一个 id，因此您可以将其用作输出。使用 div 上的 onmousemove 事件来计算事件被触发的次数并在 p 元素中显示计数。首先，我进行了一个小型练习，我试过这里的代码：

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

这很好用，但实际练习希望它成为 1 个函数 MyFunction 而不是 MyFunction1、MyFunction 2 等...当然还有 20 个不同的兔子图像等等，如果你在 4 次尝试中得到它，你会得到 "humans sucks to appears" 或者如果它超过 20 次你得到 "no easter eggs for you" 那么我尝试了以下方法：

     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>

我已经尝试过很多次这样做，但是，即使我隐藏了所有兔子的可见性。我不知道我尝试过至少十次不同尝试的程序有什么问题。这是一份报告，因为我以前的 post 的某个人基本上用他自己的意见向它发送了垃圾邮件，这与我的编程和问题无关。我正在努力理解。我猜我的 for 循环可能不会通过 querySelector('img'); 检测到数组。而且我还使用了 css 文件来隐藏 humsn suck 以及 color:white 没有的东西，如果你想知道的话。我的addEventListener我觉得也是个问题。请帮助并让我了解我的脚本有什么问题。使这项工作。再次请不要评论我的编码意见，只是可以帮助我解决我遇到的这个问题的答案。谢谢

Answer 1

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

所以不是这个：

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 MyFunction(inputVariable){

然后当您稍后调用该函数时，您将向其传递一些值；

onmouseover="MyFunction(1)"

所以在这个特定的函数调用中，inputVariable 将等于 1。如果您稍后将其称为 MyFunction(7)，inputVariable 将等于 7。

通过提供输入变量，我们可以改变函数的行为：

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

等等

至于让你的 CSS 效果正常工作，我发现有两个罪魁祸首；

您的某些函数名称拼写错误。这会导致错误，因此要验证您的拼写是否正确，只需检查您的开发人员工具即可！对于大多数浏览器，您可以通过按键盘上的 F12 键访问控制台，然后转到显示的 window 上的 "console" 选项卡。如果您的代码中出现错误（例如拼写错误），它应该出现在那里并让您意识到问题。
在少数情况下，您使用 document.get 样式命令，其中 return 数组。如果您还不熟悉数组，我建议您对它们进行一些研究，因为它们非常重要。您将需要使用 for 循环来遍历这些数组的每个项目并应用您想要的 CSS 样式。

希望对您有所帮助。 :)

javascript 尝试寻找兔子代码

javascript try to find the rabbit code

javascript

css

getelementbyid

addeventlistener

selectors-api