Передача переменных из JavaScript в HTML и ввод HTML-кнопок в JavaScript - PullRequest
Новая
       0

Передача переменных из JavaScript в HTML и ввод HTML-кнопок в JavaScript

0 голосов
/ 08 сентября 2018

Я пытаюсь сделать простую игру, используя JavaScript и HTML.

Игра состоит из двух кнопок на экране со случайными числами и нажатия кнопки, которая меньше.

В конце вы получите свои результаты.

У меня возникли проблемы с получением случайного числа, сгенерированного в JavaScript, для печати на кнопке и возвращением данных в JavaScript с кнопки. 

var number = prompt('Choose Your Difficulty, Easy, Normal, Or Hard?');
var number = number.toUpperCase(); //Chooses difficulty


if (number === 'EASY')//easy difficulty
{
 var difficulty = 20;
}else if (number === 'NORMAL')//normal difficulty
{
 var difficulty = 100;
}else if(number === 'HARD')//hard difficulty
{
 var difficulty = 1000;
}else
{
  alert('Please Enter A Valid Answer')//if value is not valid
}

var number1 = Math.floor((Math.random()* difficulty) + 1);//random number 1 

var number2 = Math.floor((Math.random()* difficulty) + 1);//random number 2

//----------------------Code i found but im not sure now to use it--------------

// 1. Create the button
var button = document.createElement("button");
button.innerHTML = "Do Something";

// 2. Append somewhere
var body = document.getElementsByTagName("body")[0];
body.appendChild(button);

// 3. Add event handler
button.addEventListener("click", function() {
   alert("did something");
});

 //-----------------------------------------------------------------------------
button {
  margin-top: 20px;
  line-height: 60px;
  font-weight: bold;
  padding: 0 40px;
  background: salmon;
  border: none;
}
button:hover {
  background: lightsalmon;
}
<!DOCTYPE html>
  <html>
  <head>
    <title>
      Speed Game
    </title>
    
      <link href="css/styles.css" rel="stylesheet"
          type="text/css">
    
     <script src="../script/script.js"></script>
  </head>
    
    <body>
    
      <button id= "button">
  Do Something!
</button>
      
    </body>
  </html>

Как я могу решить эту проблему?

1 Ответ

0 голосов
/ 08 сентября 2018

Прежде всего, добро пожаловать в мир программирования!

Во-вторых, вот игра, которую вы хотели. Я сделал все, используя функции, поэтому понять это должно быть легко.

Попробуйте сначала сыграть в несколько игр!

Концепция довольно проста, так что, поиграв немного, посмотрите на код и попытайтесь разобраться в нем сами! 

var number;
var difficulty = 0;

var randomNumOne; 
var randomNumTwo;

var buttonOne = document.getElementById("buttonOne");
var buttonTwo = document.getElementById("buttonTwo");

var tempButton;


function requestDifficulty(){
  number = prompt('Choose Your Difficulty, Easy, Normal, Or Hard?');
  number = number.toUpperCase(); 
  setDifficulty();
}

function setDifficulty(){
  if (number === 'EASY'){
    difficulty = 20;
    startGame();
  }else if (number === 'NORMAL'){
    difficulty = 100;
    startGame();
  }else if(number === 'HARD'){
    difficulty = 1000;
    startGame();
  }else{
  alert('Please Enter A Valid Answer');
    requestDifficulty()
  }
}
function startGame(){
  randomNumOne = Math.floor((Math.random()* difficulty) + 1); 
  randomNumTwo = Math.floor((Math.random()* difficulty) + 1);
  buttonOne.innerHTML = randomNumOne;
  buttonTwo.innerHTML = randomNumTwo;
}

function getResults(pressedButton){
  tempButton = pressedButton;
  if(tempButton == "buttonOne"){
    if(randomNumOne < randomNumTwo){
      alert("Correct!")
    }else{
      alert("False!")
    }
  }else if(tempButton == "buttonTwo"){
    if(randomNumTwo < randomNumOne){
      alert("Correct!")
    }else{
      alert("False!")
    }
  }
  
}

requestDifficulty();
button {
  margin-top: 20px;
  line-height: 60px;
  font-weight: bold;
  padding: 0 40px;
  background: salmon;
  border: none;
}
button:hover {
  background: lightsalmon;
}
<!DOCTYPE html>
<html>
  <head>
    <title>
      Speed Game
    </title>
  </head>
  <body>
      <button id="buttonOne" onclick="getResults('buttonOne');">
        random number 1
      </button>
      <button id="buttonTwo" onclick="getResults('buttonTwo')">
        random number 2
      </button>
  </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...