[英]assign parameter value of an object javascript
我一直在看這段代碼,試圖弄清楚這一點,但是我沒有運氣。 這個問題是我想給參數boxId賦一個值。 當我單擊網頁上的一個框時,將顯示一個警報,顯示該ID。 我嘗試了很多事情,但似乎沒有任何效果。 我是一個初學者,所以我覺得在這一點上肯定有些事情我不知道該怎么做。
構造函數:
function Box (boxId, name, color, number, coordinates) {
this.boxId = boxId;
this.name = name;
this.color = color;
this.number = number;
this.coordinates = coordinates;
}
全局變量:
var boxes = [];
var counter = 0;
var boxId = 0;
初始化函數:
window.onload = init;
function init() {
var generateButton = document.getElementById("generateButton");
generateButton.onclick = getBoxValues;
var clearButton = document.getElementById("clearButton");
clearButton.onclick = clear;
}
函數獲取值並創建新框:
function getBoxValues() {
var nameInput = document.getElementById("name");
var name = nameInput.value;
var numbersArray = dataForm.elements.amount;
for (var i = 0; i < numbersArray.length; i++) {
if (numbersArray[i].checked) {
number = numbersArray[i].value;
}
}
var colorSelect = document.getElementById("color");
var colorOption = colorSelect.options[colorSelect.selectedIndex];
var color = colorOption.value;
if (name == null || name == "") {
alert("Please enter a name for your box");
return;
}
else {
var newbox = new Box(boxId, name, color, number, "coordinates");
boxes.push(newbox);
counter++;
var boxId = counter;
}
addBox(newbox);
var data = document.getElementById("dataForm");
data.reset();
}
將框添加到頁面的功能:
function addBox(newbox) {
for (var i = 0; i < newbox.number; i++) {
var scene = document.getElementById("scene");
var div = document.createElement("div");
div.className += " " + "box";
div.innerHTML += newbox.name;
div.style.backgroundColor = newbox.color;
var x = Math.floor(Math.random() * (scene.offsetWidth-101));
var y = Math.floor(Math.random() * (scene.offsetHeight-101));
div.style.left = x + "px";
div.style.top = y + "px";
scene.appendChild(div);
div.onclick = display;
}
}
單擊框時顯示警報的功能:
function display(e) {
var a = e.target;
alert(a.counter);
}
清除框的功能:
function clear() {
var elems = document.getElementsByClassName("box");
for ( k = elems.length - 1; k >= 0; k--) {
var parent = elems[k].parentNode;
parent.removeChild(elems[k]);
}
}
所有其他功能都可以正常工作。 對於我嘗試過的所有操作,單擊ID或在控制台日志中的計數器顯示為“ 0”時,我都會不斷遇到顯示為“ undefined”的ID。
您可以這樣做。
首先,在addBox()中將boxId嵌入為標簽的屬性,如下所示:
div.setAttribute('data-boxId', newbox.boxId);
然后在display()中可以將其取回:
alert(e.target.getAttribute('data-boxId'));
請告知您是否不喜歡這種方法,我將發布替代方法(關閉事項)。
編輯:添加jsfiddle示例http://jsfiddle.net/runtarm/8FJpU/
再試一次。 也許如果您更改:
var boxId = counter;
至
boxId = counter;
然后,它將使用外部范圍中的boxId而不是函數getBoxValues()
定義的getBoxValues()
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.