Clear the old innerhtml from Javascript-CodePudding

I am trying to do an assignment where it makes random lotto numbers. I have it all built out, but when I put the first value in and it runs it will post to the HTML. Then doing a second value will concatenate to the first instead of clearing. I've tried .reset and value = "" but I must be doing something wrong. I tried searching the old posts, but couldn't find anything as I wasn't sure exactly what the problem was.

var buttons = document.getElementById("create");
var numbers = [];
var shownSelection = ""

function makeIt() {
  var input = document.getElementById("count").value;
  var resultsDiv = document.getElementById("results");

  if (input > 8) {
    alert("Too many numbers. Please try less than 8.")
  } else if (input < 1)
    alert("Nothing to predict.")
  else
    for (var i = 0; i < input; i  ) {
      numbers[i] = Math.ceil(Math.random() * 99);
    }

  for (var i = 0; i < input; i  ) {
    if (i == input - 1) {
      shownSelection = shownSelection   numbers[i];
    } else {
      shownSelection = shownSelection   numbers[i]   "-";
    }
  }

  resultsDiv.innerHTML =
    shownSelection;
  document.getElementById("results").value = "";
};

<!DOCTYPE html>

<html lang="en">

<head>
  <title>Lucky Lotto Game</title>
  <link href="css/style.css" rel="stylesheet" type="text/css">
  <script src="js/javascript.js" defer></script>
</head>

<body>

  <div class="entry">
    <ul>
      <li><input type="text" id="count" placeholder="Enter number between 1 and 8" /></li>
    </ul>
  </div>

  <div id="buttons" class="buttons">
    <button id="create" onclick="makeIt()" class="create">Get my numbers</button>
  </div><br><br><br>

  <span id="results"></span>

</body>

</html>

CodePudding user response：

Barmar answered it perfectly. It stopped concatenating together.

CodePudding user response：

You should initialize your 'shownSelection' variable inside the function so it will be empty each time you press the button:

var buttons = document.getElementById("create");
var numbers = [];


function makeIt() {
  var shownSelection = ""
  var input = document.getElementById("count").value;
  var resultsDiv = document.getElementById("results");

  if (input > 8) {
    alert("Too many numbers. Please try less than 8.")
  } else if (input < 1)
    alert("Nothing to predict.")
  else
    for (var i = 0; i < input; i  ) {
      numbers[i] = Math.ceil(Math.random() * 99);
    }

  for (var i = 0; i < input; i  ) {
    if (i == input - 1) {
      shownSelection = shownSelection   numbers[i];
    } else {
      shownSelection = shownSelection   numbers[i]   "-";
    }
  }

  resultsDiv.innerHTML =
    shownSelection;
  document.getElementById("results").value = "";
};

<!DOCTYPE html>

<html lang="en">

<head>
  <title>Lucky Lotto Game</title>
  <link href="css/style.css" rel="stylesheet" type="text/css">
  <script src="js/javascript.js" defer></script>
</head>

<body>

  <div class="entry">
    <ul>
      <li><input type="text" id="count" placeholder="Enter number between 1 and 8" /></li>
    </ul>
  </div>

  <div id="buttons" class="buttons">
    <button id="create" onclick="makeIt()" class="create">Get my numbers</button>
  </div><br><br><br>

  <span id="results"></span>

</body>

</html>