使用JavaScript生成定义数量的div

Question

所以我一直试图在过去的几个小时内解决这个问题而且它确实让我很难过，只要我能看到一切都是正确的。 create函数用于创建用户在输入框中定义的特定数量的div。 div将具有特定的高度，宽度值，但是它们将具有分配给它们的随机颜色。任何帮助将不胜感激。

谢谢，詹姆斯！

Answer 1

你的代码几乎是正确的，有两个错误的东西

• 您的代码中存在语法错误。 function create()缺少一个}。
• 在按钮上添加type="button"属性以停止提交表单。你也可以使用event.preventDefault()

function create() {
  var form = document.getElementById("boxForm");
  noBoxes = form.elements["noBox"].value;

  for (var i = 0; i < noBoxes; i++) {
    var div = document.createElement("div");
    div.style.color = "";
    div.style.backgroundColor = getRandomColor();
    div.style.height = "50px";
    div.style.width = "50px";
    document.body.appendChild(div);
  }
}

function getRandomColor() {
  var letters = "0123456789ABCDEF";
  var color = "#";
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

<form id="boxForm">
  <input type="text" name="noBox">
  <button type="button" onclick="create();">Enter</button>
</form>

Answer 2

你错过了一个右大括号，需要阻止表单提交。

function create(event) {
  // The event object is passed in so you can prevent the form submission
  event.preventDefault(); 

  var form = document.getElementById("boxForm");
  noBoxes = form.elements["noBox"].value;

  for (var i = 0; i < noBoxes; i++) {
    var div = document.createElement("div");
    div.style.color = "";
    div.style.backgroundColor = getRandomColor();
    div.style.height = "50px";
    div.style.width = "50px";
    document.body.appendChild(div);
  }

  function getRandomColor() {
    var letters = "0123456789ABCDEF";
    var color = "#";
    for (var i = 0; i < 6; i++) {
      color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
  }
}

<form id="boxForm">
  <input value=4 type="text" name="noBox">
  <button onclick="create(event)">Enter</button>
</form>