生成 100 个随机数并将它们全部显示在一个面板中

Question

我需要你的帮助。 我在使用 HTML+Javascript 的应用程序时遇到问题。我需要生成 100 个随机数并将它们全部显示在一个面板中。另外：当我只选择 2 个数字时，数字的总和必须显示在其他面板中。 我做了 html 文件，我试图弄清楚它是如何工作的，但我仍然需要你的帮助。 这是 HTML 文件：

<div id = "section1">
    <span class = "boxes" id="demo1" onclick = "sum();"></span>
        <span class = "boxes" id="demo2"></span>
        <span class = "boxes" id="demo3"></span>
        <span class = "boxes" id="demo4"></span>
        <span class = "boxes" id="demo5"></span> <br/><br/>     
        <span class = "boxes" id="demo6"></span>
        <span class = "boxes" id="demo7"></span>
        <span class = "boxes" id="demo8"></span>
        <span class = "boxes" id="demo9"></span>
        <span class = "boxes" id="demo10"></span> <br/> 
    </div>
   <div id = "section2">
        <span id="sum1" class = "sum"></span>
        <span id="sum2"></span>

    </div>

这是javascript

function myFunction() {
 var a1 =  Math.floor((Math.random()*100)+1);
 var a2 =  Math.floor((Math.random()*100)+1);
 var a3 =  Math.floor((Math.random()*100)+1);
 var a4 =  Math.floor((Math.random()*100)+1);
 var a5 =  Math.floor((Math.random()*100)+1);
 var a6 =  Math.floor((Math.random()*100)+1);
 var a7 =  Math.floor((Math.random()*100)+1);
 var a8 =  Math.floor((Math.random()*100)+1);
 var a9 =  Math.floor((Math.random()*100)+1);
 var a10 =  Math.floor((Math.random()*100)+1);

document.getElementById("demo1").innerHTML = a1;
document.getElementById("demo2").innerHTML = a2;
document.getElementById("demo3").innerHTML = a3;
document.getElementById("demo4").innerHTML = a4;
document.getElementById("demo5").innerHTML = a5;
document.getElementById("demo6").innerHTML = a6;
document.getElementById("demo7").innerHTML = a7;
document.getElementById("demo8").innerHTML = a8;
document.getElementById("demo9").innerHTML = a9;
document.getElementById("demo10").innerHTML = a10;
}

function suma(){
  var fn, ln; 
  fn = document.getElementById("demo1").value; 
  ln = document.getElementById("demo2").value; 
  result = (parseFloat(fn)+parseFloat(ln)); 
  document.getElementById("suma1").innerHTML = result; 
}

你能帮我提些建议吗？ 谢谢

Answer 1

您的问题很简单：您的代码试图将总和放在 ID 为 suma1 的元素中。但是，您没有具有该 ID 的输入。也许您打算使用sum1 或sum2。

是的，编码很难，更难做好。不要气馁。

Answer 2

试试这个：

function add(a, b){
  var total = parseInt(document.getElementById(a).innerHTML);
  total += parseInt(document.getElementById(b).innerHTML);
  document.getElementById("sum1").innerHTML =a + " + " + b + " = " + total;
}
for (var I = 0; I < 100; I++) {
  var i = document.createElement("span");
  i.innerHTML = Math.floor((Math.random() * 100) + 1) + "\n";
  i.id = I;
  document.getElementById("section1").appendChild(i);
}

<div id="section1">
</div>
<div id="section2">
  <span id="sum1" style="color:red;"></span>
</div>
<p onclick="add(Math.floor((Math.random() * 100) + 1),Math.floor((Math.random() * 100) + 1))">click me to add two random numbers from above (also chosen randomly)</p>

Answer 3

您需要引用正确的 onclick 处理程序 suma(); 并使用 document.getElementById("spanId").innerHTML 而不是 value 来获取 span 标签内的文本。

编辑：添加解决方案

function sum() {
  //Get list of html nodes and convert to regular array type
  var nodeList = document.getElementById("section1").childNodes;

  //Pick out two random elements
  var sum = getRandomNumber(nodeList) + getRandomNumber(nodeList);
  document.getElementById("sum1").innerHTML = sum;
}

function getRandomNumber(nodeList) {

  //Copy nodelist to local array so we can alter it safely with splice
  var array = toArray(nodeList);

  for (var i = array.length; i > 0; i--) {
    var index = Math.floor(Math.random() * i);

    //Remove one element from the array and check if it's a valid number
    var element = array.splice(index, 1)[0];
    var value = parseInt(element.innerHTML, 10);

    if (!isNaN(value)) {
      return value;
    }
  }
  return 0;
}

//Copy array-like object to array
function toArray(list) {
  var array = [];
  for (var i = 0, len = list.length; i < len; i++) {
    array[i] = list[i];
  }
  return array;
}

//Generate numbers
for (var i = 0; i < 100; i++) {

  var element = document.createElement("span");
  var container = document.getElementById("section1");

  element.innerHTML = Math.floor((Math.random() * 100) + 1);
  element.onclick = sum;

  //10 spans per row
  if (i % 10 == 0) {
    container.appendChild(document.createElement("br"));
  }

  container.appendChild(element);
}

span {
  display: inline-block;
  width: 5%;
  text-align: center;
  border: 1px solid black;
}

<div id="section1"></div>
<div id="section2">
  <span id="sum1" class="sum"></span>
</div>