javascript попытайтесь найти код кролика

-1

Итак, упражнение в книге выглядит следующим образом: Попробуйте превратить это в игру «поймать кролика», где кролик движется всякий раз, когда вы наводите на нее курсор. После 4 попыток наведите курсор мыши, он должен показать сообщение «Нет пасхальных яиц». После 20 попыток он должен показать «Люди сосать». Создайте страницу с одним элементом div с фиксированной шириной и высотой, а граница вокруг него содержит элемент p, расположенный под ним, который содержит idso, который вы можете использовать в качестве вывода. Используйте событие onmousemove в div, чтобы подсчитать, сколько раз было инициировано событие, и отображает счет в элементе 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 и т.д ... и, конечно, 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>

I «Я много раз пытался это сделать, но даже когда у меня есть вязкость, которую показывают все мои кролики. Я не знаю, что случилось с программой, которую я пробовал по меньшей мере десятью различными попытками. Это отчет, потому что кто-то из моего предыдущего сообщения в основном отсылал его к своим собственным мнениям, которые не имели никакого отношения к моему программированию и проблеме. которые я пытаюсь понять. Я предполагаю, что мой цикл цикла не обнаружит массив через querySelector ('img'); а также я использую файл css для hudethe humsn suck и что не с цветом: белый, если вы задаетесь вопросом. мой addEventListener, я думаю, тоже проблема. Пожалуйста, помогите мне и поймите, что случилось с моим скриптом. чтобы сделать эту работу. Опять же, пожалуйста, не комментируйте мнения моего кодирования только ответы, которые могут помочь мне решить эту проблему, которую я имею. спасибо

источник

2016-02-19 NarinderRSharma

В чем вопрос? – Pointy

SO не существует, чтобы сделать домашнее задание для вас. – gravityplanx

Вопрос в том, что я пробовал все, что не работает. даже скрывая кроликов. когда он делал это с четырьмя кроликами и четырьмя различными MyFunctions, он работает, но мне нужно иметь его в одной MyFunction не, onmouseover = MyFunction(), onemouseover = MyFunction2() и т. д. – NarinderRSharma

Это работало нормально, но фактическое осуществление хочет в 1 функции MyFunction не Myfunction1, MyFunction 2 и т.д ... и, конечно, 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

, поэтому я попробовал это, но он достал мне всех кроликов, а затем один из оставшихся: function 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 ('кролик'). Style.visibility = 'hidden'; } – NarinderRSharma

В моем HTML: Catch the rabbit и так далее до MyFunction (19), но до сих пор не работает – NarinderRSharma

Я отдаю себе отчет в консоли, но ошибки не показывать это просто что-то с моим кодом и Prolly мой onmouseout или onmouseover Я не уверен – NarinderRSharma

javascript попытайтесь найти код кролика

ответ

Смежные вопросы