javascript試圖找到兔子代碼

-1

因此，本書中的練習如下：嘗試將其變成一個「抓住兔子」的遊戲，兔子隨時隨地移動它。 4次嘗試將鼠標懸停後，應顯示「無復活節彩蛋」消息。經過20次嘗試後，應顯示「人類吸食」。創建帶有固定寬度和高度的單個div元素的頁面，並在其周圍有一個邊框，其中包含一個正下方包含idso的p元素，您可以將其用作輸出。使用div上的onmousemove事件來計算事件觸發的次數，並在p元素中顯示計數。首先我有一個迷你型的鍛鍊我嘗試下面的代碼：javascript試圖找到兔子代碼

<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等..和ofcourse 20張不同的兔子圖片而這一切，如果你4次嘗試中得到它，你獲得了「人類吮吸出現」，或者如果它的20倍以上，你得到「沒有復活節彩蛋你」所以後來我嘗試了以下內容：

 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>

我我曾多次嘗試過這樣做，但即使當我將兔子的全部可見性都隱藏起來的時候。我不知道我試過至少十次不同的嘗試的程序有什麼問題。這是一個報告，因爲我以前的帖子中有人基本上用自己的觀點發布了垃圾郵件，這與我的編程和問題無關。我正在試着理解。我猜可能我的for循環不會通過querySelector（'img'）檢測數組;並且我還使用了一個css文件來隱藏嗡嗡聲，而不是顏色：如果您想知道的話，請使用白色。我認爲addEventListener也是一個問題。請幫助並讓我明白我的腳本有什麼問題。做這個工作。再次請不要評論我的編碼的意見只是答案，可能會幫助我解決我遇到的這個問題。謝謝

來源

2016-02-19 NarinderRSharma

什麼問題？ – Pointy

SO不存在爲你做功課。 – gravityplanx

問題是我試過一切都不行。甚至隱藏兔子。當它只有四隻兔子和四個不同的MyFunctions它可以工作，但我需要它在一個MyFunction中不是，onmouseover = MyFunction（），onemouseover = MyFunction2（）等... – NarinderRSharma

這工作得很好，但實際行使希望它變成1周功能的MyFunction不Myfunction1，MyFunction的2等..和ofcourse 20種不同的兔子圖像和所有

這所以不是：

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鍵訪問控制檯，然後轉到顯示的窗口上的「控制檯」選項卡。如果代碼中發生錯誤（例如拼寫錯誤），它應該顯示在那裏並讓您意識到問題。
在少數情況下，您使用document.get樣式命令返回數組。如果你還不熟悉數組，我會建議對它們進行一些研究，因爲它們非常重要。您需要使用for循環才能遍歷這些數組的每個項目並應用所需的CSS樣式。

希望這可以幫助你。 :)

來源

2016-02-20 02:02:43 gravityplanx

所以我試了一下，但它讓我所有的兔子，然後剩下一個：函數MyFunction（inputVar）{ document.querySelectorAll（'img'）[0] .style.visibility ='visible'; document.querySelectorAll（'img'）[1] .style.visibility ='hidden'; document.querySelectorAll（'img'）[2] .style.visibility ='hidden'; 高達20然後在它下面做了一個if語句： if（inputVar == 0）{document.getElementById（'rabbit'）。style.visibility ='visible'; } else { document.getElementById（'rabbit'）。style.visibility ='hidden'; } – NarinderRSharma

在我的html： Catch the rabbit 等多達MyFunction的（19），但仍然無法正常工作 – NarinderRSharma

我知道控制檯的，但錯誤沒有表現出來只是一些我的代碼和prolly我的onmouseout或onmouseover我不確定 – NarinderRSharma

javascript試圖找到兔子代碼

回答

相關問題