Local Storage Input Name and Display Greeting for a Game

I seem to be making an error with my local storage and retrieving a response. The coin toss aspect works perfectly. I want the user to enter their name, have their named be stored as local storage and when submit is pressed the page displays a greeting using their name. My assignment requires this be done as local storage. Thanks!

<!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!";
}

Solution

The issue is that you are passing a value of name, but mistakenly you are passing it as a string, instead of the pre-defined variable that you have, becauselocalStorage.setItem("THE_NAME_OF_THE_SAVED_ITEM", THE_VALUE) So, this should do the trick:

<!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>

Also, not entirely sure where you want to display the message from document.write.innerText = "Hello," + localStorage.getItem('userName')+ "let's play heads or tails!"; but for me, when I tried that part in the dev tools, it just console logged, so look for in the console.