如何从数组 (array.length = 5) 中获取数字并将每个数字 (n) 转换为 5 个独立 DIV 中的 n 个框堆栈？

Question

我尝试编写一个简单的 5 输入（数字）页面以将值放入数组中。 然后，我想提取每个数字值以将它们“转换”成 5 个不同的盒子堆栈。 我想将这些数字具体化为更直观的显示。 我必须只使用 Vanilla JS。 我想创建 5 个不同的隔间来放置这些盒子。

这是我的 HTML、CSS 和 JS 代码。 目前，我已经找到了如何使用一些条件颜色样式来区分不同的数字。

 let boxes = [] let length = boxes.length const boxContainer = document.querySelector('#resultContainer') const results = document.querySelector('.stack') const button = document.querySelector('#qtyButton') let getTas1 let getTas2 let getTas3 let getTas4 let getTas5 button.addEventListener('click', function() { fillArray() function fillArray() { getTas1 = document.querySelector('.Qty1').value getTas2 = document.querySelector('.Qty2').value getTas3 = document.querySelector('.Qty3').value getTas4 = document.querySelector('.Qty4').value getTas5 = document.querySelector('.Qty5').value boxes.push(getTas1, getTas2, getTas3, getTas4, getTas5) } boxes.forEach((res) => displayBoxes(res)) }) function displayBoxes(res) { for (b = 0; b < res; b++) { let box = document.createElement('div') box.classList.add('compart') switch (res) { case getTas1: box.classList.add('red') break case getTas2: box.classList.add('blue') break case getTas3: box.classList.add('green') break case getTas4: box.classList.add('yellow') break case getTas5: box.classList.add('pink') break } box.innerHTML = `<div></div>` results.appendChild(box) } }

 * { box-sizing: border-box; margin: 0; }.mainContainer { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; width: 1050px; margin: auto; }.formContainer { display: flex; flex-direction: column; width: 100%; height: 25%; border: 2px solid red; justify-content: space-evenly; }.buttonZone { display: flex; justify-content: center; }.formTitle { display: flex; justify-content: center; }.inputZone { display: flex; width: 100%; justify-content: space-evenly; } #resultContainer { display: flex; border: 2px solid blue; width: 100%; height: 25%; }.stack { display: flex; align-items: center; }.compart { display: flex; justify-content: center; width: 20px; height: 20px; margin: 3px; }.case { display: flex; width: 20%; border: 1px solid grey; }.red { background-color: red; }.blue { background-color: blue; }.green { background-color: green; }.yellow { background-color: yellow; }.pink { background-color: pink; }

 <div class="mainContainer"> <div class="formContainer"> <div class="formTitle">How many boxes?</div> <div class="inputZone"> <input type="number" class="Qty1"> <input type="number" class="Qty2"> <input type="number" class="Qty3"> <input type="number" class="Qty4"> <input type="number" class="Qty5"> </div> <div class="buttonZone"> <button id="qtyButton">Go</button> </div> </div> <div id="resultContainer"> <div class="stack"></div> </div> </div>

先感谢您

Answer 1

我假设连续的 btn 点击应该重置每个容器以便清除结果（ document.querySelector('.stack').innerHTML='' ）。 接下来我用res传递索引，这样我就可以在 css 的color列表中引用它来缩短代码，尽管正如我提到的那样，使用纯 css 可能会更干净。 要动态创建div ，请在列表前创建一个包含 class 组的新 div，添加颜色 div，然后将该组添加到循环后的结果中。

 let boxes = [] let length = boxes.length const button = document.querySelector('#qtyButton') const color = ['red','blue','green','yellow','pink'] // could be css, as each group has diff color // change.red to #group1 div const results = document.querySelector('.stack') let getTas1 let getTas2 let getTas3 let getTas4 let getTas5 button.addEventListener('click', function() { fillArray() function fillArray() { getTas1 = document.querySelector('.Qty1').value getTas2 = document.querySelector('.Qty2').value getTas3 = document.querySelector('.Qty3').value getTas4 = document.querySelector('.Qty4').value getTas5 = document.querySelector('.Qty5').value document.querySelector('.stack').innerHTML='' boxes.push(getTas1, getTas2, getTas3, getTas4, getTas5) } boxes.forEach((res,i) => displayBoxes(res,i)) console.log('résultat:', boxes) }) function displayBoxes(res,idx) { let group=document.createElement('div') group.classList.add('group') for (b = 0; b < res; b++) { let box = document.createElement('div') box.classList.add('compart') box.classList.add(color[idx]) box.innerHTML = `<div></div>` group.appendChild(box) } results.append(group) }

 * { box-sizing: border-box; margin: 0; }.mainContainer { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; width: 1050px; margin: auto; }.formContainer { display: flex; flex-direction: column; width: 100%; height: 25%; border: 2px solid red; justify-content: space-evenly; }.buttonZone { display: flex; justify-content: center; }.formTitle { display: flex; justify-content: center; }.inputZone { display: flex; width: 100%; justify-content: space-evenly; } #resultContainer { display: flex; border: 2px solid blue; width: 100%; height: 25%; }.stack { display: flex; align-items: center; width:100%; }.group { width: 20%; display: flex; align-items: center; }.compart { display: flex; justify-content: center; width: 20px; height: 20px; margin: 3px; }.case { display: flex; width: 20%; border: 1px solid grey; }.red { background-color: red; }.blue { background-color: blue; }.green { background-color: green; }.yellow { background-color: yellow; }.pink { background-color: pink; }

 <div class="mainContainer"> <div class="formContainer"> <div class="formTitle">How many boxes?</div> <div class="inputZone"> <input type="number" class="Qty1"> <input type="number" class="Qty2"> <input type="number" class="Qty3"> <input type="number" class="Qty4"> <input type="number" class="Qty5"> </div> <div class="buttonZone"> <button id="qtyButton">Go</button> </div> </div> <div id="resultContainer"> <div class="stack"> </div> </div> </div>

Answer 2

删除了不需要的 function 调用事件侦听器。

我刚刚修改了你的代码

 let boxes = [] let length = boxes.length const boxContainer = document.querySelector('#resultContainer') const results = document.querySelector('.stack') const button = document.querySelector('#qtyButton') let getTas1 let getTas2 let getTas3 let getTas4 let getTas5 button.addEventListener('click', function() { results.innerHTML = `` boxes = [] getTas1 = document.querySelector('.Qty1').value getTas2 = document.querySelector('.Qty2').value getTas3 = document.querySelector('.Qty3').value getTas4 = document.querySelector('.Qty4').value getTas5 = document.querySelector('.Qty5').value boxes.push(getTas1, getTas2, getTas3, getTas4, getTas5) boxes.map((item, index) => { displayBoxes(item, index) }) }) function displayBoxes(item, index) { for (b = 0; b < item; b++) { let box = document.createElement('div') box.classList.add('compart') switch (index) { case 0: box.classList.add('red') break case 1: box.classList.add('blue') break case 2: box.classList.add('green') break case 3: box.classList.add('yellow') break case 4: box.classList.add('pink') break } box.innerHTML = `<div></div>` results.appendChild(box) } }

 * { box-sizing: border-box; margin: 0; }.mainContainer { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; width: 1050px; margin: auto; }.formContainer { display: flex; flex-direction: column; width: 100%; height: 25%; border: 2px solid red; justify-content: space-evenly; }.buttonZone { display: flex; justify-content: center; }.formTitle { display: flex; justify-content: center; }.inputZone { display: flex; width: 100%; justify-content: space-evenly; } #resultContainer { display: flex; border: 2px solid blue; width: 100%; height: 25%; }.stack { display: flex; align-items: center; }.compart { display: flex; justify-content: center; width: 20px; height: 20px; margin: 3px; }.case { display: flex; width: 20%; border: 1px solid grey; }.red { background-color: red; }.blue { background-color: blue; }.green { background-color: green; }.yellow { background-color: yellow; }.pink { background-color: pink; }

 <div class="mainContainer"> <div class="formContainer"> <div class="formTitle">How many boxes?</div> <div class="inputZone"> <input type="number" class="Qty1"> <input type="number" class="Qty2"> <input type="number" class="Qty3"> <input type="number" class="Qty4"> <input type="number" class="Qty5"> </div> <div class="buttonZone"> <button id="qtyButton">Go</button> </div> </div> <div id="resultContainer"> <div class="stack"></div> </div> </div>