Блог

Главная - Вопросы по программированию - Почему моя кнопка JS ничего не обновляет, когда я нажимаю на нее?

Почему моя кнопка JS ничего не обновляет, когда я нажимаю на нее?

#javascript #html

Вопрос:

Я делаю простую игру для развлечения, и кнопка, которую я использую, чтобы дать вам что-то, не работает:

 <!DOCTYPE html>
<html lang="en">
<head>
<title>Keys</title>
<script>
var keys = 0;
window.onload = function() {
document.getElementById("count").innerHTML="You have "   keys   " keys.";
}
function increase_keys() {
keys  ;
}
</script>
</head>
<body>
<button onclick="increase_keys()">Make Keys</button>
<p id="count"></p>
</body>
</html>

Я попытался присвоить кнопке идентификатор, определяющий, когда на нее нажимают, но это, похоже, тоже не работает:

 <!DOCTYPE html>
<html lang="en">
<head>
<title>Keys</title>
<script>
var keys = 0;
window.onload = function() {
document.getElementById("count").innerHTML="You have "   keys   " keys.";
}
if(document.getElementById('give_key').clicked == true) {
keys  ;
}
</script>
</head>
<body>
<button id="give_key">Make Keys</button>
<p id="count"></p>
</body>
</html>

Все остальное работает: я могу изменить значение keys на любое число, и оно отображается правильно, это всего лишь одна кнопка. Я уверен, что это не то, что я использую, я скопировал код на свое устройство и получил тот же результат.

Ответ №1:

Я думаю , что вы видите, что элемент p, который устанавливается document.getelementbyid , обновляется только при загрузке страницы.

Вместо этого поместите функцию, которая устанавливает элемент p в свою собственную функцию, а затем используйте функцию setInterval JS в цикле. (Посмотрите, что вы хотите узнать, это функциональность)

Другими словами, переменная обновляется, это текст, которого нет. Ваш код для этого должен выглядеть следующим образом:

 function setkeys() {
document.getElementById("count").innerHTML="You have "   keys   " keys.";
}
setInterval(setkeys, 1000);

Ответ №2:

Вот измененная версия кода mti2935. Он не использует глобальные переменные, вместо этого код считывает количество ключей со страницы, увеличивает число на 1 и обновляет страницу. Нет необходимости вызывать функцию при загрузке страницы, начальное значение уже отображается на странице во время загрузки.

Он также отображает «1 клавиша», «2 клавиши» и т.д. Такие маленькие штрихи — это то, что отличает вас от обычного разработчика.

 <!DOCTYPE html>
<html lang="en">
  <head>
    <title>Keys</title>
  </head>
  <body>
    <button onclick="increase_keys()">Make Keys</button>
    <p>You have <span id="count">0</span> key<span id="plural">s</span>.</p>  
  </body>
  <script>
    function increase_keys() {
      var oldKeyCount = document.getElementById("count").innerHTML;
      var newKeyCount = parseInt(oldKeyCount,10) 1;
      document.getElementById("count").innerHTML = newKeyCount;
      if (newKeyCount=="1") {
        document.getElementById("plural").innerHTML="";
      } else {
        document.getElementById("plural").innerHTML="s";
      }
    }
  </script> 
</html>

Я создал скрипку здесь: https://jsfiddle.net/texasswede/m75kzqr3/

Комментарии:

1. Я даже не думал об обновлении, я думал, что JS волшебным образом обновил все. Я думаю, что невежество-это не блаженство в мире программирования. Спасибо вам (и всем остальным) за отзывы и ответы. Если я могу вас кое о чем спросить, зачем ставить <script> тег после содержимого? Я слышал, что люди помещают внутренний CSS после тела, чтобы ускорить загрузку страницы, это то же самое для JS?

Ответ №3:

1) Вы должны поместить JS в нижней части body .

2) Вы отображаете текстовое сообщение только один раз. Вы должны обновлять его после каждого нажатия кнопки

 <!DOCTYPE html>
<html lang="en">

<head>
  <title>Keys</title>
</head>

<body>
  <button onclick="increase_keys()">Make Keys</button>
  <p id="count"></p>

  <script>
    var keys = 0;

    function render() {
      document.getElementById("count").innerHTML = "You have "   keys   " keys.";
    }

    function increase_keys() {
      keys  ;
      render()
    }
    
    // Render first time only
    render()
  </script>
</body>

</html>

Ответ №4:

Когда вы нажимаете на кнопку, она вызывает increase_keys() функцию. Это increase_keys() увеличивает значение keys , но после этого больше ничего не делает. Таким образом, новое значение keys никогда не отображается.

Я немного перестроил вашу программу, чтобы создать новую функцию showkeys() , которая отображает значение keys . showkeys() вызывается изнутри increase_keys() , так что значение keys отображается после его увеличения. showkeys() также вызывается из windows.onload , чтобы значение keys » от » отображалось при загрузке страницы.

 <!DOCTYPE html>
<html lang="en">
  <head>
    <title>Keys</title>
  </head>
  <body>
    <button onclick="increase_keys()">Make Keys</button>
    <p id="count"></p>
  </body>
  <script>
    var keys = 0;
    window.onload = function() {
      showkeys();
    }
    function increase_keys() {
      keys  ;
      showkeys();
    }
    function showkeys() {
      document.getElementById("count").innerHTML="You have "   keys   " keys.";
    }
  </script> 
</html>
Метки: ,