unknown error caused every innerHTML to break

Question

button = document.getElementById("button");
//creates "clicker" in js
clicker = document.getElementById("clicker");
//creates "reset" in js
reset = document.getElementById("reset");

//Random Number Chooser
var random;
document.getElementById("ret").innerHTML = "_";

//randomize button
button.addEventListener("click", function() {
  random = Math.floor(Math.random() * 100) + 1;
  document.getElementById("ret").innerHTML = random;
});

//Click Counter
var clickerNum = 0;
document.getElementById("clicky").innerHTML = clickerNum;

//reset button
reset.addEventListener("click", function() {
  clickerNum = 0;
  document.getElementById("clicky").innerHTML = clickerNum;
  document.getElementById("ret").innerHTML = "_";
});

//click button
clicker.addEventListener("click", function() {
  clickerNum++;
  document.getElementById("clicky").innerHTML = clickerNum;
});

//input receive/return
document.getElementById("retAnswer").innerHTML = "You submitted: ";
//submit button function
function submitAnswer() {
  var answer = document.getElementById("input1").value;
  document.getElementById("retAnswer").innerHTML = "You submitted: " + answer;
}

//Guess which button
var gameOrder = "";
var playerInput = "";
document.getElementById("order").innerHTML = gameOrder;



//this part
function startGame(){
  gameOrder = "";
  playerInput = "";
  document.getElementById("order").innerHTML = gameOrder;
  memoryGame();
}

function memoryGame(){
  var randomNum = Math.floor(Math.random() * 3) + 1;

  if(randomNum == 1){
    //make button 1 turn green
    gameOrder += "1";
  }
  else if(randomNum ==2){
    //make button 2 turn green
    gameOrder += "2";
  }
  else{
    //make button 3 turn green
    gameOrder += "3";
  }

  document.getElementById("order").innerHTML = gameOrder;
}

function addInput(var input){
  playerInput += input;
}

I am learning web development and I am trying to add a little memorization game to my website. The problem is that when I added the last part (commented "this part") all the innerHTML parts broke. Every one on the page so it doesn't even have a space for it. I was wondering if maybe it is because there may be a limit to how many innerHTML you can use? I don't really think that's it, but I can't find any error that would cause all the innerHTML to break. I commented out the last part and everything worked again, so I know that the problem is in the last section.

<html>

<body>
  <header>
    Random Number Chooser
  </header>
  <br>
  <!--- Random Number Chooser --->
  <div class="wrapper" id="button">
    <button type="button">Randomize!</button>
  </div>
  <div class="wrapper" id="ret">
  </div>
  <br>
  <br>

  <header>
    Click Counter
  </header>
  <!--- Click Counter --->
  <div class="wrapper" id="reset">
    <button type="button">Reset</button>
  </div>
  <div class="wrapper" id="clicky">
  </div>
  <div class="wrapper" id="clicker">
    <button type="button">Click</button>
  </div>
  <!--- input receive and return --->
  <br>
  <header>
    Input Receive/Return
  </header>
  <div class="wrapper">
    <input type="text" id="input1" />
    <button onclick="submitAnswer()">Submit</button>
  </div>
  <div class="wrapper" id="retAnswer">
  </div>
  <br>
  <!--- Which button --->
  <header>
    Guess which button
  </header>
  <div class="wrapper" id="restart">
    <button onclick="startGame()">Start/Reset</button>
  </div>
  <div class="wrapper" id="order">
  </div>
  <br>
  <div class="wrapper" id="but1">
    <button onclick="addInput("1")">1</button>
  </div>
  <div class="wrapper" id="but2">
    <button onclick="addInput("2")">2</button>
  </div>
  <div class="wrapper" id="but3">
    <button onclick="addInput("3")">3</button>
  </div>
  <br>
  <div class="wrapper" id="gameSubmit">
    <button>Submit</button>
  </div>
</body>

</html>```

what is the actual error? What is the HTML so it can be run? — epascarello, Nov 07 '19 at 16:18
Your problem may be due to your understanding of innerHTML....https://stackoverflow.com/questions/19030742/difference-between-innertext-and-innerhtml — quaabaam, Nov 07 '19 at 16:19
I see one syntax error at `function addInput(var input){` remove the `var` — dikuw, Nov 07 '19 at 16:23
You also have syntax errors in your HTML: `` should be `` likewise for 2 and 3 — dikuw, Nov 07 '19 at 16:25
and add `type="button"` to your buttons so they are not submit buttons. — epascarello, Nov 07 '19 at 16:26
Get something like eslint or jslint to help find the issues in your code. — epascarello, Nov 07 '19 at 16:30

score 0 · Accepted Answer · answered Nov 07 '19 at 16:26

Your problem is in the last function of your code, noticed how instead of saying function addInput(input) you said function addInput(var input)

You can't declare variables there, the section between parentheses is used to pass parameters. This broke the script. So if you just remove var from the function it will work.

Here's the function should look like

function addInput(input){
    playerInput += input;
}

Good luck with your learning!

unknown error caused every innerHTML to break

1 Answers1