1. дома
  2. Вопрос и ответ
  3. HTML/Javascript счетчик не работает

HTML/Javascript счетчик не работает

2016-05-24 2 views
0

Я занимаюсь стилем «cookie clicker» в HTML для моего друга.HTML/Javascript счетчик не работает

У меня есть счетчик посещений вид работа. в основном, когда вы нажимаете изображение, число внизу должно увеличиваться на единицу при каждом нажатии. Затем есть кнопки на стороне, которые изменяют количество, которое число увеличивается при каждом нажатии. I.e: Когда вы нажимаете изображение без нажатия кнопок, число увеличивается на единицу, когда вы нажимаете кнопку «2 щелчка», номер должен с шагом в 2 каждый щелчок.

Когда я нажимаю кнопки, они делают число приращение по заданному количеству (на кнопке), а затем нажав на изображение ничего не делает ...

Существует также некоторая логика, которая не работает.

Вот код: ` 

<script type="text/javascript"> 
 
\t \t \t //Inital click value 
 
\t \t \t var clicks = 0; 
 
\t \t \t 
 
\t \t \t //Click counters 
 
\t \t \t 
 
\t \t \t function clicklee1() { 
 
\t \t \t \t clicks += 1; 
 
\t \t \t \t document.getElementById("clicks").innerHTML = clicks; 
 
\t \t \t }; 
 
\t \t \t function clicklee2() { 
 
\t \t \t \t clicks += 2; 
 
\t \t \t \t document.getElementById("clicks").innerHTML = clicks; 
 
\t \t \t }; 
 
\t \t \t function clicklee3() { 
 
\t \t \t \t clicks += 5; 
 
\t \t \t \t document.getElementById("clicks").innerHTML = clicks; 
 
\t \t \t }; 
 
\t \t \t function clicklee4() { 
 
\t \t \t \t clicks += 10; 
 
\t \t \t \t document.getElementById("clicks").innerHTML = clicks; 
 
\t \t \t }; 
 
\t \t \t function clicklee5() { 
 
\t \t \t \t clicks += 100; 
 
\t \t \t \t document.getElementById("clicks").innerHTML = clicks; 
 
\t \t \t }; 
 
\t \t \t function clicklee6() { 
 
\t \t \t \t clicks += 1000; 
 
\t \t \t \t document.getElementById("clicks").innerHTML = clicks; 
 
\t \t \t }; 
 
\t \t \t function clicklee7() { 
 
\t \t \t \t clicks += 1000000; 
 
\t \t \t \t document.getElementById("clicks").innerHTML = clicks; 
 
\t \t \t }; 
 
\t \t \t 
 
\t \t \t //Changing the "onclick" value of lee 
 
\t \t \t 
 
\t \t \t function changeclicks1() { 
 
\t \t \t \t document.getElementById("lee").onclick = clicklee1(); 
 
\t \t \t } 
 
\t \t \t function changeclicks2() { 
 
\t \t \t \t document.getElementById("lee").onclick = clicklee2(); 
 
\t \t \t } 
 
\t \t \t function changeclicks3() { 
 
\t \t \t \t document.getElementById("lee").onclick = clicklee3(); 
 
\t \t \t } 
 
\t \t \t function changeclicks4() { 
 
\t \t \t \t document.getElementById("lee").onclick = clicklee4(); 
 
\t \t \t } 
 
\t \t \t function changeclicks5() { 
 
\t \t \t \t document.getElementById("lee").onclick = clicklee5(); 
 
\t \t \t } 
 
\t \t \t function changeclicks6() { 
 
\t \t \t \t document.getElementById("lee").onclick = clicklee6(); 
 
\t \t \t } 
 
\t \t \t function changeclicks7() { 
 
\t \t \t \t document.getElementById("lee").onclick = clicklee7(); 
 
\t \t \t } 
 
\t \t \t 
 
\t \t \t //Unlockable logic 
 
\t \t \t 
 
\t \t \t if(clicks < 5) { 
 
      document.getElementById('changebutton2').disabled = true; 
 
\t \t \t } 
 
\t \t \t if(clicks >= 5) { 
 
      document.getElementById('changebutton2').disabled = false; 
 
\t \t \t } 
 
\t \t \t 
 
\t \t \t if(clicks < 20) { 
 
      document.getElementById('changebutton3').disabled = true; 
 
\t \t \t } 
 
\t \t \t if(clicks >= 20) { 
 
      document.getElementById('changebutton3').disabled = false; 
 
\t \t \t } 
 
\t \t \t 
 
\t \t \t if(clicks < 50) { 
 
      document.getElementById('changebutton4').disabled = true; 
 
\t \t \t } 
 
\t \t \t if(clicks >= 50) { 
 
      document.getElementById('changebutton4').disabled = false; 
 
\t \t \t } 
 
\t \t \t 
 
\t \t \t if(clicks < 75) { 
 
      document.getElementById('changebutton5').disabled = true; 
 
\t \t \t } 
 
\t \t \t if(clicks >= 75) { 
 
      document.getElementById('changebutton5').disabled = false; 
 
\t \t \t } 
 
\t \t \t 
 
\t \t \t if(clicks < 200) { 
 
      document.getElementById('changebutton6').disabled = true; 
 
\t \t \t } 
 
\t \t \t if(clicks >= 200) { 
 
      document.getElementById('changebutton6').disabled = false; 
 
\t \t \t } 
 
\t \t \t 
 
\t \t \t if(clicks < 500) { 
 
      document.getElementById('changebutton7').disabled = true; 
 
\t \t \t } 
 
\t \t \t if(clicks >= 500) { 
 
      document.getElementById('changebutton7').disabled = false; 
 
\t \t \t } 
 
\t \t </script> 
 
<img id="lee" src="lee.png" height="300" width="300" onclick="clicklee1()"> 
 
\t \t <p>Clicks: <a id="clicks">0</a></p> 
 
\t \t <div class="unlocks" style="text-align: right;"> 
 
\t \t \t <button id="changebutton1" onclick="changeclicks1()">1 Click</button><br> 
 
\t \t \t <p>Requires 5 clicks</p> 
 
\t \t \t <button id="changebutton2" onclick="changeclicks2()">2 Clicks</button><br> 
 
\t \t \t <p>Requires 20 clicks</p> 
 
\t \t \t <button id="changebutton3" onclick="changeclicks3()">5 Clicks</button><br> 
 
\t \t \t <p>requires 50 clicks</p> 
 
\t \t \t <button id="changebutton4" onclick="changeclicks4()">10 Clicks</button><br> 
 
\t \t \t <p>Requires 75 clicks</p> 
 
\t \t \t <button id="changebutton5" onclick="changeclicks5()">100 Clicks</button><br> 
 
\t \t \t <p>Requires 200 clicks</p> 
 
\t \t \t <button id="changebutton6" onclick="changeclicks6()">1,000 Clicks</button><br> 
 
\t \t \t <p>Requires 500 clicks<p/> 
 
\t \t \t <button id="changebutton7" onclick="changeclicks6()">1,000,000 Clicks</button> 
 
\t \t </div>

источник

2016-05-24 EoinAviation

ответ

0

Есть несколько вопросов, в вашем посте.

Первый заключается в том, что скрипт находится перед html, что предотвращает работу document.getElementById, потому что html еще не полностью разобран. Он должен быть после или завернут в window.onload или эквивалентную функцию.

Второй указывает другой ответ: onclick принимает функцию в качестве аргумента, а не результат ее оценки.

В-третьих: наличие одной специальной функции для каждого шага клика очень похоже на код спагетти. Почему бы не сделать шаг, который может измениться при нажатии на ваши кнопки?

Наконец, ваш последний, если операторы выполняются только один раз, когда они должны быть каждый раз, когда изменение click значение

Вы можете либо обернуть, что в функции, которые вы запускаете каждый раз при нажатии на изображение, или использовать наблюдаемые например, в knockout. Чтобы приблизиться к вашему коду ввода, я сделал первый подход.

//Inital click value 
 
var clicks = 0; 
 
var step = 1; 
 

 
//Click counters 
 

 
function clicklee() { 
 
    clicks += step; 
 
    document.getElementById("clicks").innerHTML = clicks; 
 
    enableClicks(); 
 
}; 
 
//Changing the "onclick" value of lee 
 

 
function changeclicks1() { 
 
    step = 1; 
 
} 
 

 
function changeclicks2() { 
 
    step = 2; 
 
} 
 

 
function changeclicks3() { 
 
    step = 5; 
 
} 
 

 
function changeclicks4() { 
 
    step = 10; 
 
} 
 

 
function changeclicks5() { 
 
    step = 20; 
 
} 
 

 
function changeclicks6() { 
 
    step = 100; 
 
} 
 

 
function changeclicks7() { 
 
    step = 1000; 
 
} 
 

 
//Unlockable logic 
 

 
function enableClicks() { 
 
    if (clicks < 5) { 
 
    document.getElementById('changebutton2').disabled = true; 
 
    } 
 
    if (clicks >= 5) { 
 
    document.getElementById('changebutton2').disabled = false; 
 
    } 
 

 
    if (clicks < 20) { 
 
    document.getElementById('changebutton3').disabled = true; 
 
    } 
 
    if (clicks >= 20) { 
 
    document.getElementById('changebutton3').disabled = false; 
 
    } 
 

 
    if (clicks < 50) { 
 
    document.getElementById('changebutton4').disabled = true; 
 
    } 
 
    if (clicks >= 50) { 
 
    document.getElementById('changebutton4').disabled = false; 
 
    } 
 

 
    if (clicks < 75) { 
 
    document.getElementById('changebutton5').disabled = true; 
 
    } 
 
    if (clicks >= 75) { 
 
    document.getElementById('changebutton5').disabled = false; 
 
    } 
 

 
    if (clicks < 200) { 
 
    document.getElementById('changebutton6').disabled = true; 
 
    } 
 
    if (clicks >= 200) { 
 
    document.getElementById('changebutton6').disabled = false; 
 
    } 
 

 
    if (clicks < 500) { 
 
    document.getElementById('changebutton7').disabled = true; 
 
    } 
 
    if (clicks >= 500) { 
 
    document.getElementById('changebutton7').disabled = false; 
 
    } 
 
}
#lee { 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: yellow; 
 
} 
 
.button { 
 
    display: block; 
 
}
<div id="lee" height="50" width="50" onclick="clicklee()">click me</div> 
 
<p>Clicks: <a id="clicks">0</a> 
 
</p> 
 
<div class="unlocks"> 
 
    <div class="button"> 
 
    <button id="changebutton1" onclick="changeclicks1()">1 Click</button> 
 
    <p>Requires 5 clicks</p> 
 
    </div> 
 
    <div class="button"> 
 
    <button id="changebutton2" onclick="changeclicks2()">2 Clicks</button> 
 
    <p>Requires 20 clicks</p> 
 
    </div> 
 
    <div class="button"> 
 
    <button id="changebutton3" onclick="changeclicks3()">5 Clicks</button> 
 
    <p>requires 50 clicks</p> 
 
    </div> 
 
    <div class="button"> 
 
    <button id="changebutton4" onclick="changeclicks4()">10 Clicks</button> 
 
    <p>Requires 75 clicks</p> 
 
    </div> 
 
    <div class="button"> 
 
    <button id="changebutton5" onclick="changeclicks5()">20 Clicks</button> 
 
    <p>Requires 200 clicks</p> 
 
    </div> 
 
    <div class="button"> 
 
    <button id="changebutton6" onclick="changeclicks6()">100 Clicks</button> 
 
    <p>Requires 500 clicks 
 
     <p/> 
 
    </div> 
 
    <div class="button"> 
 
    <button id="changebutton7" onclick="changeclicks7()">1000 Clicks</button> 
 
    <p>Requires 2000 clicks<p/> 
 
    </div> 
 
</div>

источник

2016-05-24 11:22:40

0

onclick принимает функцию ссылки, а не значение, возвращаемое function.

Изменение этой линии (а так же для других)

document.getElementById("lee").onclick = clicklee1();

в

document.getElementById("lee").onclick = clicklee1;

Существует также некоторая логика, которая не работает.

Эта логика должна быть внутри обработчика в document.onload событий, так как document.getElementById('changebutton2') возвратит нуль в противном случае, как этот элемент не был загружен в DOM еще.

делают

document.onload = function(){ 
    if(clicks < 5) { 
      document.getElementById('changebutton2').disabled = true; 
    } 
    if(clicks >= 5) { 
      document.getElementById('changebutton2').disabled = false; 
    } 
    //rest of the logic 
};

источник

2016-05-24 11:11:23 gurvinder372

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

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