从Javascript中清除旧的innerhtml
[英]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.我已经全部构建好了，但是当我将第一个值放入并运行时，它将发布到 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.我试过.reset和value = ""但我一定是做错了什么。 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>
1 个解决方案
解决方案1
0 已采纳 2021-10-15 04:00:07
You should initialize your 'shownSelection' variable inside the function so it will be empty each time you press the button:您应该在函数内初始化“shownSelection”变量，以便每次按下按钮时它都会为空：
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.