英文:
How to add new box with size of the last box
问题
我有一个问题，要添加一个功能，该功能会创建一些尺寸逐渐增大的方块，当我尝试添加更多方块时，它们将从前一个最后一个方块的尺寸开始。
到目前为止，我有如下代码：
function getRandomHexColor() {
return `#${Math.floor(Math.random() * 16777215).toString(16)}`;
}
const input = document.querySelector("#controls > input");
const createBtn = document.querySelector("button[data-create]");
const destroyBtn = document.querySelector("button[data-destroy]");
const boxCollection = document.querySelector("#boxes");
const createBoxes = (amount) => {
amount = input.value;
for (let i = 0; i < amount; i += 1) {
let newBox = document.createElement("div");
newBox.style.height = `${30 + 10 * i}px`;
newBox.style.width = `${30 + 10 * i}px`;
newBox.style.background = getRandomHexColor();
boxCollection.insertAdjacentElement("beforeend", newBox);
}
};
createBtn.addEventListener("click", createBoxes);
const destroyBoxes = () => {
boxCollection.innerHTML = "";
};
destroyBtn.addEventListener("click", destroyBoxes);
我考虑添加一个新的变量，它将是const boxCollection的lastChild，然后将其添加到newBox的高度和宽度上。我考虑得对吗？
英文:
I have a problem with adding a function which will create an amount of boxes with rising size and when i try to add more I will start from the size of the previous last box.
So far i have a code like this:
function getRandomHexColor() {
return `#${Math.floor(Math.random() * 16777215).toString(16)}`;
}
const input = document.querySelector("#controls>input");
const createBtn = document.querySelector("button[data-create]");
const destroyBtn = document.querySelector("button[data-destroy]");
const boxCollection = document.querySelector("#boxes");
const createBoxes = (amount) => {
amount = input.value;
for (let i = 0; i < amount; i += 1) {
let newBox = document.createElement("div");
newBox.style.height = `${30 + 10 * i}px`;
newBox.style.width = `${30 + 10 * i}px`;
newBox.style.background = getRandomHexColor();
boxCollection.insertAdjacentElement("beforeend", newBox);
}
};
createBtn.addEventListener("click", createBoxes);
const destroyBoxes = () => {
boxCollection.innerHTML = "";
};
destroyBtn.addEventListener("click", destroyBoxes);
I was thinking about adding a new var which will be the lastChild of const boxCollection and add it to height and width of newBox. Am I thinking right?
答案1
得分: 0
你可以将盒子的最新尺寸存储在一个变量中。
function getRandomHexColor() {
return `#${Math.floor(Math.random() * 16777215).toString(16)}`;
}
const input = document.querySelector("#controls > input");
const createBtn = document.querySelector("button[data-create]");
const destroyBtn = document.querySelector("button[data-destroy]");
const boxCollection = document.querySelector("#boxes");
let currentBoxSize = 30 // 起始盒子尺寸
const BOX_SIZE_INCREMENT = 10 // 增加的尺寸
const createBoxes = (amount) => {
amount = input.value;
for (let i = 0; i < amount; i += 1) {
let newBox = document.createElement("div");
newBox.style.height = `${currentBoxSize}px`;
newBox.style.width = `${currentBoxSize}px`;
newBox.style.background = getRandomHexColor();
boxCollection.insertAdjacentElement("beforeend", newBox);
currentBoxSize += BOX_SIZE_INCREMENT
}
};
createBtn.addEventListener("click", createBoxes);
const destroyBoxes = () => {
boxCollection.innerHTML = "";
};
destroyBtn.addEventListener("click", destroyBoxes);
英文:
You could hold the latest size of the box in a var.
function getRandomHexColor() {
return `#${Math.floor(Math.random() * 16777215).toString(16)}`;
}
const input = document.querySelector("#controls>input");
const createBtn = document.querySelector("button[data-create]");
const destroyBtn = document.querySelector("button[data-destroy]");
const boxCollection = document.querySelector("#boxes");
let currentBoxSize = 30 // starting box size
const BOX_SIZE_INCREMENT = 10 // increment size
const createBoxes = (amount) => {
amount = input.value;
for (let i = 0; i < amount; i += 1) {
let newBox = document.createElement("div");
newBox.style.height = `${currentBoxSize}px`;
newBox.style.width = `${currentBoxSize}px`;
newBox.style.background = getRandomHexColor();
boxCollection.insertAdjacentElement("beforeend", newBox);
currentBoxSize += BOX_SIZE_INCREMENT
}
};
createBtn.addEventListener("click", createBoxes);
const destroyBoxes = () => {
boxCollection.innerHTML = "";
};
destroyBtn.addEventListener("click", destroyBoxes);
</details>
# 答案2
**得分**: 0
只需将最后的 `input` 值存储在一个变量中，或者如果您想要保留状态，可以将其存储在本地存储中，当您点击创建框时，将其与新的 `input` 值相加。
```javascript
function getRandomHexColor() {
return `#${Math.floor(Math.random() * 16777215).toString(16)}`;
}
const input = document.querySelector("#controls>input");
const createBtn = document.querySelector("button[data-create]");
const destroyBtn = document.querySelector("button[data-destroy]");
const boxCollection = document.querySelector("#boxes");
let lastInputValue = 0;
const createBoxes = (amount) => {
amount = input.value + lastInputValue;
for (let i = 0; i < amount; i += 1) {
let newBox = document.createElement("div");
newBox.style.height = `${30 + 10 * i}px`;
newBox.style width = `${30 + 10 * i}px`;
newBox.style.background = getRandomHexColor();
boxCollection.insertAdjacentElement("beforeend", newBox);
}
lastInputValue = amount;
};
createBtn.addEventListener("click", createBoxes);
const destroyBoxes = () => {
boxCollection.innerHTML = "";
};
destroyBtn.addEventListener("click", destroyBoxes);
请注意，代码部分未被翻译。
英文:
Just store the last input value in a variable, or if you want to preserve the state, you can store it in locale storage, and when you click create boxes, sum it with the value with the new input value.
function getRandomHexColor() {
return `#${Math.floor(Math.random() * 16777215).toString(16)}`;
}
const input = document.querySelector("#controls>input");
const createBtn = document.querySelector("button[data-create]");
const destroyBtn = document.querySelector("button[data-destroy]");
const boxCollection = document.querySelector("#boxes");
let lastInputValue = 0;
const createBoxes = (amount) => {
amount = input.value + lastInputValue;
for (let i = 0; i < amount; i += 1) {
let newBox = document.createElement("div");
newBox.style.height = `${30 + 10 * i}px`;
newBox.style.width = `${30 + 10 * i}px`;
newBox.style.background = getRandomHexColor();
boxCollection.insertAdjacentElement("beforeend", newBox);
}
lastInputValue = amount;
};
createBtn.addEventListener("click", createBoxes);
const destroyBoxes = () => {
boxCollection.innerHTML = "";
};
destroyBtn.addEventListener("click", destroyBoxes);
答案3
得分: 0
你可以创建一个带有当前盒子数量的变量，或者每次添加更多盒子时都可以进行计数。在示例中，当前数量 (currentCount) 基于 querySelectorAll() 的长度。
function getRandomHexColor() {
return `#${Math.floor(Math.random() * 16777215).toString(16)}`;
}
const boxCollection = document.querySelector("#boxes");
const createBoxes = e => {
e.preventDefault();
let amount = parseInt(e.target.amount.value);
let currentCount = boxCollection.querySelectorAll('div').length;
Object.keys([...Array(amount)]).forEach(i => {
let incVal = parseInt(i) + currentCount;
let newBox = document.createElement("div");
newBox.style.height = `${30 + 10 * incVal}px`;
newBox.style width = `${30 + 10 * incVal}px`;
newBox.style.background = getRandomHexColor();
boxCollection.insertAdjacentElement("beforeend", newBox);
});
};
const destroyBoxes = e => {
e.preventDefault();
boxCollection.innerHTML = "";
};
document.forms.create.addEventListener("submit", createBoxes);
document.forms.destroy.addEventListener("submit", destroyBoxes);
<form name="create">
<input type="number" name="amount" />
<button>Create</button>
</form>
<form name="destroy">
<button>Destroy</button>
</form>
<div id="boxes"></div>
请注意，上述代码片段中的 HTML 和 JavaScript 部分已被提取并翻译，其余部分保持不变。
英文:
You can either create a variable with the current number of boxes or you can just count the current number each time you add more. In the example the current number (currentCount) is based on the length of a querySelectorAll().
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
function getRandomHexColor() {
return `#${Math.floor(Math.random() * 16777215).toString(16)}`;
}
const boxCollection = document.querySelector("#boxes");
const createBoxes = e => {
e.preventDefault();
let amount = parseInt(e.target.amount.value);
let currentCount = boxCollection.querySelectorAll('div').length;
Object.keys([...Array(amount)]).forEach(i => {
let incVal = parseInt(i) + currentCount;
let newBox = document.createElement("div");
newBox.style.height = `${30 + 10 * incVal}px`;
newBox.style.width = `${30 + 10 * incVal}px`;
newBox.style.background = getRandomHexColor();
boxCollection.insertAdjacentElement("beforeend", newBox);
});
};
const destroyBoxes = e => {
e.preventDefault();
boxCollection.innerHTML = "";
};
document.forms.create.addEventListener("submit", createBoxes);
document.forms.destroy.addEventListener("submit", destroyBoxes);
<!-- language: lang-html -->
<form name="create">
<input type="number" name="amount" />
<button>Create</button>
</form>
<form name="destroy">
<button>Destroy</button>
</form>
<div id="boxes"></div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论