Estoy tratando de hacer una tarea en la que hace números de lotería al azar. Lo tengo todo construido, pero cuando pongo el primer valor y se ejecuta, se publicará en el HTML. Luego, hacer un segundo valor se concatenará con el primero en lugar de borrarse. .reset y value = "" pero debo estar haciendo algo mal. Intenté buscar en las publicaciones antiguas, pero no pude encontrar nada porque no estaba seguro de cuál era exactamente el problema.
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>Debe inicializar su variable 'shownSelection' dentro de la función para que esté vacía cada vez que presione el botón:
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>