[英]Pass Multidimensional Array Elements to Div in Js
I have looked and haven't found any solutions to my issue.我已经查看并没有找到任何解决我的问题的方法。 I have a grid like a puzzle.
我有一个像拼图一样的网格。
<div id="grid-container">
<div class="item" id="item1"><a href="#"></a></div>
<div class="item" id="item2"><a href="#"></a></div>
<div class="item" id="item3"><a href="#"></a></div>
<div class="item" id="item4"><a href="#"></a></div>
<div class="item" id="item5"><a href="#"></a></div>
<div class="item" id="item6"><a href="#"></a></div>
<div class="item" id="item7"><a href="#"></a></div>
<div class="item" id="item8"><a href="#"></a></div>
<div class="item" id="item9"><a href="#"></a></div>
<div class="item" id="item10"><a href="#"></a></div>
<div class="item" id="item11"><a href="#"></a></div>
<div class="item" id="item12"><a href="#"></a></div>
<div class="item" id="item13"><a href="#"></a></div>
<div class="item" id="item14"><a href="#"></a></div>
<div class="item" id="item15"><a href="#"></a></div>
<div class="item" id="item16"><a href="#"></a></div>
<div class="item" id="item17"><a href="#"></a></div>
<div class="item" id="item18"><a href="#"></a></div>
<div class="item" id="item19"><a href="#"></a></div>
<div class="item" id="item20"><a href="#"></a></div>
<div class="item" id="item21"><a href="#"></a></div>
<div class="item" id="item22"><a href="#"></a></div>
<div class="item" id="item23"><a href="#"></a></div>
<div class="item" id="item24"><a href="#"></a></div>
<div class="item" id="item25"><a href="#"></a></div>
<div class="item" id="item26"><a href="#"></a></div>
<div class="item" id="item27"><a href="#"></a></div>
<div class="item" id="item28"><a href="#"></a></div>
<div class="item" id="item29"><a href="#"></a></div>
<div class="item" id="item30"><a href="#"></a></div>
<div class="item" id="item31"><a href="#"></a></div>
<div class="item" id="item32"><a href="#"></a></div>
<div class="item" id="item33"><a href="#"></a></div>
<div class="item" id="item34"><a href="#"></a></div>
<div class="item" id="item35"><a href="#"></a></div>
<div class="item" id="item36"><a href="#"></a></div>
</div>
and I have an array of what I want to fill the puzzle with:我有一系列我想用以下内容填充拼图的内容:
var ws = [
['A', 'P', 'P', 'L', 'E', 'P'],
['A', 'G', 'C', 'A', 'A', 'I'],
['A', 'R', 'A', 'A', 'A', 'Z'],
['A', 'A', 'A', 'A', 'T', 'Z'],
['P', 'P', 'A', 'A', 'A', 'A'],
['A', 'E', 'P', 'R', 'A', 'Y']
];
I have also created class to print out the array.我还创建了类来打印出数组。
class Puzzle {
constructor(width, height) {
this.width = (width)? width : 6;
this.height = (height)? height : 6;
if(this.width != this.height)
throw "height and width must be the same"
}
print(){
console.log(ws)
}
}
puz = new Puzzle(6, 6);
puz.print();
What I want to do is to pass the output of the array into each div with IDs: item1..36.我想要做的是将数组的输出传递到每个带有 ID 的 div:item1..36。
I have used我用过了
document.getElementById('myArray').innerHTML = ws;
to try to get it to work but its not working.试图让它工作,但它不工作。 Please I need a better approach to it.
请我需要一个更好的方法。
You may try this inside your print
function.您可以在
print
功能中尝试此操作。 (my guess is your print
will update the UI) (我的猜测是您的
print
将更新用户界面)
print() { for(var i =1 ; i<= this.height; i++){ for(var j = 1; j <= this.width; j++) { document.getElementById(`item${(i-1) * this.height + j}`).innerHTML = ws[i-1][j-1]; } } }
Hope this will help!希望这会有所帮助!
you need to create a matrix on the contructor,你需要在构造函数上创建一个矩阵,
class Puzzle {
constructor(width, height) {
var ws = [
['A', 'P', 'P', 'L', 'E', 'P'],
['A', 'G', 'C', 'A', 'A', 'I'],
['A', 'R', 'A', 'A', 'A', 'Z'],
['A', 'A', 'A', 'A', 'T', 'Z'],
['P', 'P', 'A', 'A', 'A', 'A'],
['A', 'E', 'P', 'R', 'A', 'Y']
];
if(this.width != this.height)
throw "height and width must be the same"
}
print(){
console.log(this)
}
}
puz = new Puzzle(6, 6);
now you can create a function that update the page and put values on elements: you put all items on an 1D array and then iterate items with 2 for cycle:现在您可以创建一个函数来更新页面并将值放在元素上:您将所有项目放在一维数组上,然后用 2 循环迭代项目:
function updatePage(var x){
var elements = document.getElementsByClassName("item");
var k = 0;
for(var i = 0; i < puzzle.height; i++){
for(var j = 0; j < puzzle.width; j++){
elements[k].innerHTML = x.grid[i][j];
k++;
}
}
}
and finally you can call your function to view grid elements on the page:最后你可以调用你的函数来查看页面上的网格元素:
updatePage(puzz);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.