Как вывести переменную в функции JavaScript в текст в формате HTML - PullRequest
Новая
       1

Как вывести переменную в функции JavaScript в текст в формате HTML

0 голосов
/ 25 февраля 2019

Я пытаюсь добавить случайное число 1-6 в переменную, когда вы нажимаете на Botton.Затем, каждый раз, когда вы нажимаете, он добавляет 1-6 к переменной, пока не достигнет 21 или более.Я хочу, чтобы итоговое значение (переменная по имени клики) выводилось в тег "a" в HTML, но текущий код не выводит переменную "клики" в тег "a" в коде.

Код:

<!DOCTYPE html>

<html>

<body>

<h2>Get To 21!</h2>

<div>
<p> Click The Dice To Role! The Counter Below Will Record Your Score!</p>

</div>

<div>

<p id="game"></p>

  </div>

<script>
 var clicks = 0;

  function random()
{
    if (clicks > 21) {
      alert("You Got To 22! You Lose! Please Try Again!");
      location.reload();
    }

    clicks += Math.floor(Math.random() * 6) + 1;
        document.getElementById('clicks').value = rnd;
  document.getElementById("clicks").innerHTML = clicks;

};
</script>



<input type="image" value="clicks" onclick="random()" src="http://pluspng.com/img-png/black-and-white-dice-png-black-white-dice-bunco-clip-art-dice-images-free-900.jpg" alt="Dice2" width="450" height="280">  

  Total Count: <a id="clicks">0</a>

</body>

</html>

Ответы [ 3 ]

0 голосов
/ 25 февраля 2019

Кости имеют числа от 1 до 6, поэтому ранд должен +1!
Правильно определите свои элементы.И кешируйте их.
Создайте gameOver логику (чтобы проверить как выигрыш, так и проигрыш)
Не используйте встроенный JS.
Не перезагружайте страницу.Сбросьте score. 

var score = 0;
var el_game = document.getElementById('game');
var el_dice = document.getElementById('dice');

function roll() {
  score +=  Math.floor(Math.random() * 6) + 1; 
  game.textContent = score;
  checkGameOver();
};

function checkGameOver() {
  var message = '';
  if (score === 21) {
    message = '21! You won!';
  } else if (score > 21) {
    message = 'Over 22! Try Again!';
  }
  if(message) { // Game is over (we have a message)
    alert(message); // Notify
    score = 0;     // And reset clicks
  }
}

el_dice.addEventListener('click', roll);
<button id="dice">ROLL DICE!</button>
<p id="game"></p>
0 голосов
/ 25 февраля 2019

Вы можете добавить идентификатор к изображению и затем использовать .on ('click'), чтобы изменить innerHTML. 

var clicks = 0;

$('#dice').on('click', function () {
   clicks++;
   $('#clicks').html(clicks);
});
0 голосов
/ 25 февраля 2019

Переменная rnd не определена. 

 var clicks = 0;

  function random()
{
    if (clicks > 21) {
      alert("You Got To 22! You Lose! Please Try Again!");
      location.reload();
    }

    clicks += Math.floor(Math.random() * 6) + 1;
//        document.getElementById('clicks').value = rnd; You have not define this rnd and using this which throws error.
  document.getElementById("clicks").innerHTML = clicks;

};
</div>

<div>

<p id="game"></p>

  </div>





<input type="image" value="clicks" onclick="random()" src="http://pluspng.com/img-png/black-and-white-dice-png-black-white-dice-bunco-clip-art-dice-images-free-900.jpg" alt="Dice2" width="450" height="280">  

  Total Count: <a id="clicks">0</a>

</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...