Входное имя локального хранилища и отображение приветствия для игры - PullRequest
Новая
       7

Входное имя локального хранилища и отображение приветствия для игры

0 голосов
/ 30 октября 2018

Я, кажется, делаю ошибку с моим локальным хранилищем и получаю ответ. Аспект подбрасывания монет работает отлично. Я хочу, чтобы пользователь ввел свое имя, чтобы его имя было сохранено как локальное хранилище, и при нажатии кнопки «Отправить» на странице отображается приветствие с его именем. Мое назначение требует, чтобы это было сделано как локальное хранилище. Спасибо! 

<!DOCTYPE html>
<html>
<head>
    <title>Heads or Tails</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <form>
What is your name: <input type="text" class="instructions" />
<input type="text" id="name" style="display: none;" />
<button type="button" class="submit" onclick="greeting();" >Submit</button>
</form>
<div class="hello"></div>
    <h1>Will it be heads or tails?</h1>
    <input type="button" class="button" onclick="junction();" value="Let's 
      Flip!">
    <h3 id="response"></h3>

</body>
<script src="app.js"></script>
</html>


/* 
Generate randomly 1 or 2
assign 1 to heads
use if else statement
else (number is 2) assign to tails
track results
make button clickable multiple times without refresh

*/

/* Heads or tails*/
function junction(){
var randomNumber = Math.floor(Math.random() * 2) + 1;

if(randomNumber == 1){
document.getElementById("response").innerHTML = "Heads!";
} else {
document.getElementById("response").innerHTML = "Tails!";
}
}

/*local storage of name*/
function greeting(){
var name= getElementById('name').value;
localStorage.setItem("userName", "name");
document.write.innerText = "Hello," + localStorage.getItem('userName')+ 
"let's play heads or tails!";
}

1 Ответ

0 голосов
/ 30 октября 2018

Проблема в том, что вы передаете значение имени, но по ошибке вы передаете его в виде строки вместо предопределенной переменной, которая у вас есть, потому что localStorage.setItem("THE_NAME_OF_THE_SAVED_ITEM", THE_VALUE) Итак, это должно сработать: 

<!DOCTYPE html>
<html>
<head>
    <title>Heads or Tails</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
  <form>
      <!-- Few changes made here. -->
      <label for="name">What is your name: </label>
      <input type="text" id="name" placeholder="Enter name here...">
      <button type="button" class="submit" onclick="greeting();" >Submit</button>
</form>
<h3 id="greetUser"></h3>
<div class="hello"></div>
    <h1>Will it be heads or tails?</h1>
    <input type="button" class="button" onclick="junction();" value="Let's 
      Flip!">
    <h3 id="response"></h3>

</body>
<script>
/* 
Generate randomly 1 or 2
assign 1 to heads
use if else statement
else (number is 2) assign to tails
track results
make button clickable multiple times without refresh

*/

/* Heads or tails*/
function junction(){
  var randomNumber = Math.floor(Math.random() * 2) + 1;

  if(randomNumber == 1){
  document.getElementById("response").innerHTML = "Heads!";
  } else {
  document.getElementById("response").innerHTML = "Tails!";
  }
}


/*local storage of name*/
function greeting(){
  var name = document.getElementById('name').value;
  var greetUser = document.getElementById("greetUser");
  // Just get rid of the "" at the value (change "name" to name).
  localStorage.setItem("userName", name);
  greetUser.textContent = "Hello," + localStorage.getItem('userName') + 
  " . Let's play heads or tails!";
}
</script>
</html>

Кроме того, не совсем уверен, где вы хотите отобразить сообщение от document.write.innerText = "Hello," + localStorage.getItem('userName')+ "let's play heads or tails!";, но для меня, когда я попробовал эту часть в инструментах разработки, он просто консоль вошел в систему, так что искать в консоли.

...