Я принимаю онлайн-курс javascript через Oreilly School Of Technology. Я закончил каждый урок, за исключением последнего. Мой инструктор требует времени, чтобы вернуться ко мне с вопросами, поэтому я решил, что обратясь к вам за помощью. Я не хочу, чтобы вы рассказывали мне о решении, а скорее помогали понять, что мне нужно делать.JavaScript Объекты, конструкторы, точечные обозначения
Вот мой пример,
window.onload = init;
var counter = 0;
function init() {
\t var generateButton = document.getElementById("generateButton");
\t var clearButton = document.getElementById("clearButton");
\t var scene = document.getElementById("scene");
\t generateButton.onclick = generate;
\t //clearButton.onclick = clear;
}
function Box(boxID, name, color, xPos, yPos) {
\t this.boxID = boxID;
\t this.name = name;
\t this.color = color;
\t this.xPos = xPos;
\t this.yPos = yPos;
}
function generate() {
\t var boxes = [];
\t var colorSelect = document.getElementById("color");
\t var colorSelectOption = colorSelect.options[colorSelect.selectedIndex];
\t var colorSelectVal = colorSelectOption.value;
\t var boxesToGen = data.elements.amount;
for (var i = 0; i < boxesToGen.length; i++) {
if(boxesToGen[i].checked) {
\t var boxesToGenVal = boxesToGen[i].value;
\t for (var i = 0; i < boxesToGenVal; i++) {
\t \t \t \t var div = document.createElement("div");
\t \t \t \t var divClass = div.setAttribute("class", "box");
\t \t \t \t divClass = div.setAttribute("id", counter);
\t \t \t \t var addDivs = scene.appendChild(div);
\t \t \t \t
\t \t \t \t var name = document.getElementById("name");
\t \t \t \t var boxName = name.value;
\t \t \t \t div.innerHTML = boxName;
\t \t \t \t counter++;
\t \t \t \t newBox = new Box(counter, boxName, colorSelectVal, x, y);
\t \t \t \t var x = Math.floor(Math.random() * (scene.offsetWidth-101));
\t \t \t \t var y = Math.floor(Math.random() * (scene.offsetHeight-101));
\t \t \t \t div.style.backgroundColor = colorSelectVal;
\t \t \t \t div.style.left = x + "px";
\t \t \t \t div.style.top = y + "px";
\t \t \t \t boxes.push(newBox);
\t \t \t \t newBox.boxID = counter;
\t \t \t \t console.log(boxes);
\t \t \t \t
\t \t \t \t div.onclick = display;
\t \t \t \t }
\t \t \t }
\t \t }
\t \t function display(e) {
\t \t \t div = e.target;
\t \t \t alert("boxID = " + newBox.boxID + " name = " + newBox.name + " color = " + newBox.color + " xPos = " + newBox.xPos + " yPos = " + newBox.yPos);
\t \t \t console.log(getId);
\t }
}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 будет содержать каждое свойство поля, включая его идентификатор, имя, цвет и позиции x и y. Обратите внимание, что идентификатор каждого окна должен быть уникальным, но имя отсутствует (у вас будет несколько ящиков с тем же именем).
коробки: массив всех ящиков. Все ящики должны быть представлены элементами и заданы класс «ящик» и уникальный идентификатор. (Обратите внимание, что вы можете просто использовать номер для идентификатора, если хотите!).
counter: глобальная переменная, которая отслеживает количество генерируемых ящиков, которые вы можете использовать для создания уникального идентификатора для каждого окна.
init(): обработчик нагрузки.
generate(): обработчик кликов для Generate! кнопка. Эта функция генерирует элементы, которые представляют поля.
clear(): обработчик кликов для Clear! кнопка. Эта функция удаляет все ящики со сцены и сбрасывает все, чтобы вы могли начать с нуля.
дисплей(): обработчик кликов для каждой коробки. Когда пользователь нажимает на поле, эта функция будет отображать предупреждение со всей информацией о поле, включая его идентификатор, имя, цвет и позицию.
На самом деле, я не могу воспроизвести это. Когда я нажимаю на каждое поле, ожидаемый идентификатор отображается как часть 'alert (...)' (это не всегда '5'). – JCOC611
Я не знаю, что вы сказали здесь; слов слишком много. Я получаю разные идентификаторы, когда я нажимаю на поле, во всплывающем предупреждении. –
Вы должны получить предупреждение, когда вы нажимаете на каждый div. Попробуйте снова. Теперь идентификаторы должны быть одинаковыми. У меня был какой-то взломанный код, заставляющий div id быть другим. –