JavaScript实现乐透号码生成时新结果无法清空旧值如何解决

算力阿峰

2026-9-30

问题原因

shownSelection被定义为全局变量，每次执行makeIt函数时都会在上次的字符串基础上拼接新内容，不会自动清空旧值，导致结果累加。
<span id="results">是普通文本元素，没有value属性，你写的document.getElementById("results").value = ""属于无效操作，无法清空内容。
输入值不符合要求的分支没有加终止逻辑，即便弹出了告警，后续拼接旧值的代码还是会执行，进一步加重内容拼接问题。

修复方案

把两个存储临时数据的变量移到函数内部，每次执行函数都会重新初始化，同时补全非法输入的终止逻辑，删除对span的无效value操作，修正后的JS代码如下：

var buttons = document.getElementById("create");

function makeIt() {
  var numbers = [];
  var shownSelection = "";
  // 把输入值转成数字，避免字符串比较的异常问题
  var input = Number(document.getElementById("count").value);
  var resultsDiv = document.getElementById("results");

  if (input > 8) {
    alert("Too many numbers. Please try less than 8.");
    return;
  } else if (input < 1) {
    alert("Nothing to predict.");
    return;
  } 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 += numbers[i];
    } else {
      shownSelection += numbers[i] + "-";
    }
  }

  resultsDiv.textContent = shownSelection;
};