Question

我正在尝试使某些元素根据从表单接收的数字来更改颜色。

例如当玩家在表格中键入2时，“颜色”数组中应该有2种颜色。

function intro() {
  var num = document.getElementById('quant').value;
  var color = ["#FCB711", "#F37021", "#CC004C", "#6460AA", "#0080D0", "#0DB14B"];
  var i;

  for (i = 1; i <= 42; i++) {
    document.getElementById('s' + i).style.backgroundColor = color[getRndInteger(0, num)];
  }
}

<form id="tion" action="" method="get">
  Player (between 2 and 6):
  <input type="number" name="quant" min="2" max="6">
  <input type="button" value="start" onclick="intro()">
</form>

Answer 1

由于您没有显示代码的相关部分，因此我对其进行了简化。您输入的内容缺少我添加的id="quant"。

function colorTheDiv() {
  const color = ["#FCB711", "#F37021", "#CC004C", "#6460AA", "#0080D0", "#0DB14B"];
  document.getElementById('colorMe').style.backgroundColor = color[parseInt(document.getElementById('quant').value)];
}

<label for="quant">Player (between 2 and 6)</label>
<input type="number" name="quant" id="quant" min="2" max="6" onchange="colorTheDiv()">
<hr />
<div id="colorMe">colorMe</div>

我还替换了button并在colorTheDiv的值发生变化时执行quant函数（如果您愿意，也可以保留按钮）。

Answer 2

首先为您的字段指定一个数量ID。您也缺少42个元素

我想你是真的意思

var color = ["#FCB711", "#F37021", "#CC004C", "#6460AA", "#0080D0", "#0DB14B"];

function getRndInteger(max) {
  return Math.floor(Math.random() * max);
}

function intro() {
  var container = document.getElementById("container");
  container.innerHTML = "";
  var num = document.getElementById('quant').value;
  if (!num) {
    alert("Give a value")
    return;
  }
  for (var i = 1; i <= 42; i++) {
    var col = color[getRndInteger(num)];
    var span = document.createElement("span");
    span.innerText = i;
    span.id = "s" + i;
    span.style.backgroundColor = col;
    container.appendChild(span)
  }
}

<form id="tion" action="" method="get">
  Player (between 2 and 6):
  <input type="number" id="quant" min="2" max="6">
  <input type="button" value="start" onclick="intro()">
</form>
<div id="container"></div>

Answer 3

您需要给您的字段一个ID“ quant”，而不仅仅是一个名称，否则getElementByID将返回null

如何将HTML表单输入用作JS变量

3 个答案: