Question

0

219

Vistas

Clear the old innerhtml from Javascript

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>

about 4 years ago · Juan Pablo Isaza

1 Respuestas

Responde la pregunta

0

Responde la pregunta

Encuentra empleos remotos

Accepted Answer · 2022-07-11T10:46:35.232Z

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>

0

219

Clear the old innerhtml from Javascript

1 Respuestas

0

Encuentra empleos remotos

Andres GPT