Question

我正在通过Oreilly School Of Technology参加在线javascript课程。除了最后一节，我已经完成了每一课。我的导师花了一些时间回答我的问题所以我想我会联系你寻求帮助。我不希望你告诉我解决方案，而是帮助理解我需要做的事情。

这是我的例子，

window.onload = init;

var counter = 0;

function init() {
	var generateButton = document.getElementById("generateButton");
	var clearButton = document.getElementById("clearButton");
	var scene = document.getElementById("scene");

	generateButton.onclick = generate;
	//clearButton.onclick = clear;
}

function Box(boxID, name, color, xPos, yPos) {
	this.boxID = boxID;
	this.name = name;
	this.color = color;
	this.xPos = xPos;
	this.yPos = yPos;
}

function generate() {
	var boxes = [];
   
	var colorSelect = document.getElementById("color");
	var colorSelectOption = colorSelect.options[colorSelect.selectedIndex];
	var colorSelectVal = colorSelectOption.value;

	var boxesToGen = data.elements.amount;
  for (var i = 0; i < boxesToGen.length; i++) {
    if(boxesToGen[i].checked) {
    	var boxesToGenVal = boxesToGen[i].value;

    	for (var i = 0; i < boxesToGenVal; i++) {

				var div = document.createElement("div");

				var divClass = div.setAttribute("class", "box");
				divClass = div.setAttribute("id", counter);

				var addDivs = scene.appendChild(div);

				

				var name = document.getElementById("name");
				var boxName = name.value;

				div.innerHTML = boxName;

				counter++;

				newBox = new Box(counter, boxName, colorSelectVal, x, y);

				var x = Math.floor(Math.random() * (scene.offsetWidth-101));
				var y = Math.floor(Math.random() * (scene.offsetHeight-101));

				div.style.backgroundColor = colorSelectVal;

				div.style.left = x + "px";
				div.style.top = y + "px";

				boxes.push(newBox);

				newBox.boxID = counter;

				console.log(boxes);
				

				div.onclick = display;

				}
			}
		}
		function display(e) {
			div = e.target;
			alert("boxID = " + newBox.boxID + " name = " + newBox.name + " color = " + newBox.color + " xPos = " + newBox.xPos + " yPos = " + newBox.yPos);
			console.log(getId);
	}
}

html, body {
    width: 100%;
    height: 90%;
    margin: 0px;
    padding: 0px;
    font-family: Helvetica, Arial, sans-serif;
}
                
input#generateButton {
    margin-left: 15px;
}
                
div#status {
    margin-left: 15px;
}
                
div#scene {
    position: relative;
    width: 100%;
    height: 80%;
    margin: 0px;
    padding: 0px;
}
                
div.box {
    position: absolute;
    width: 100px;
    height: 90px;
    padding-top: 10px;
    text-align: center;
    overflow: hidden;
}

<!doctype html>
<html lang="en">
<head>
  <title> Final Project: Amazing Boxes </title>
  <meta charset="utf-8">
</head>
<body>
  <form id="data">
    <ol>
      <li>Pick a name for your Amazing Box: <br>
        <label for="name">Name: </label>
          <input type="text" id="name" size="20">
      </li>
      <li>Pick a color for your Amazing Box: <br>
        <select id="color">
          <option value="red">Red</option>
          <option value="orange">Orange</option>
          <option value="yellow">Yellow</option>
          <option value="green">Green</option>
          <option value="blue">Blue</option>
          <option value="indigo">Indigo</option>
          <option value="violet">Violet</option>
        </select>
      </li>
      <li>How many Amazing Boxes do you want to create?<br>
        <input type="radio" id="five" name="amount" value="5">
          <label for="five">5</label><br>
        <input type="radio" id="ten" name="amount" value="10">
          <label for="ten">10</label><br>
        <input type="radio" id="fifteen" name="amount" value="15">
          <label for="fifteen">15</label><br>
      </li>
    </ol>
    <p>
      <input type="button" id="generateButton" value="Generate!">
      <input type="button" id="clearButton" value="Clear">
    </p>
  </form>
  <div id="scene">

  </div>


</body>
</html>

https://jsfiddle.net/f5670m68/2/

这是课程的方向。特别是我对某一部分感到困惑。它与display（）函数有关。我遇到的问题是当我点击div并执行newBox.boxID时，每个框的结果为5。生成的代码虽然包含div id =“1”，div id =“2”等。看起来它总是使用最后一个增量值。

Box（）：创建一个名为Box的构造函数，为每个生成的框创建框对象。 Box对象将保存框的每个属性，包括其id，名称，颜色以及x和y位置。请注意，每个框的id必须是唯一的，但名称不是（您将有多个具有相同名称的框）。

框：所有框的数组。所有框都应该由元素表示，并给出类“box”和唯一id。（请注意，如果需要，您可以使用一个数字作为id。）。

counter：一个全局变量，用于跟踪生成的框数，您可以使用它来为每个框创建唯一的ID。

init（）：加载处理程序。

generate（）：Generate的点击处理程序！按钮。此函数生成表示框的元素。

clear（）：清除的点击处理程序！按钮。此功能会从场景中删除所有框，并重置所有内容，以便您可以从头开始。

display（）：每个框的单击处理程序。当用户单击某个框时，此功能将显示一个警告，其中包含有关该框的所有信息，包括其ID，名称，颜色和位置。

Answer 1

newBox（您在代码BTW中未声明的任何内容）是一个在循环中不断覆盖的变量。它将保留您为其分配的最后一个值，因此如果生成5个框然后单击一个，则newBox函数中访问的display()将是您创建的最后一个（ID为1） 5）。

您似乎想要检索与单击的框对应的框对象。您分配给框元素的ID实际上是0,1,2,3 ......，因此您可以根据其ID在数组中检索它们（在display()函数内部：

var clickedBox = boxes[getId];

您还应该在循环的 end 处递增counter而不是在中间。你拥有它的方式，你给你的盒子DIV提供了来自盒子对象的不同ID。

瞧，你的计划的那部分应该有效。

https://jsfiddle.net/f5670m68/5/

（在您为x和y变量提供价值之前，您还有一个问题。我已经解决了这个问题。）

Answer 2

我无法重现您的错误（点击div时所有ID都是正确的）

我认为您需要做的是在全局范围内声明您的var boxes = [];（在当前函数之外），然后在display函数中执行以下操作：

var newBox = boxes[getId];

这只能起作用，因为您将div ID设置为循环的counter值。（你真的不应该只设置数字ID - 我认为这是无效的）

JavaScript对象，构造函数，点符号

2 个答案: