Hey everyone,
I'm facing an issue with creating matrices in HTML. I need to display a 5x5 matrix where each index is represented by a square. I tried using a span template for the box and then wrote a script to populate the matrices, but it's not working as expected. Here's what I'm getting:
[object HTMLSpanElement][object HTMLSpanElement][object HTMLSpanElement][object HTMLSpanElement][object HTMLSpanElement]
[object HTMLSpanElement][object HTMLSpanElement][object HTMLSpanElement][object HTMLSpanElement][object HTMLSpanElement]
[object HTMLSpanElement][object HTMLSpanElement][object HTMLSpanElement][object HTMLSpanElement][object HTMLSpanElement]
[object HTMLSpanElement][object HTMLSpanElement][object HTMLSpanElement][object HTMLSpanElement][object HTMLSpanElement]
[object HTMLSpanElement][object HTMLSpanElement][object HTMLSpanElement][object HTMLSpanElement][object HTMLSpanElement]
Here is the code snippet:
<style>
html {
background-color: #E6E6FF;
}
#square{
width: 30px;
height: 30px;
background: #000;
display: inline-block;
border: 1px solid #fff;
}
</style>
<head>
<body>
<div id="matrixBox">
<span id="square"></span>
</div>
<script>
var x = 5;
var y = 5;
var matrix = [];
var content= '';
var matrixBox = document.getElementById("matrixBox");
var square = document.getElementById("square");
for (var i = 0; i < x; i++) {
matrix[i] = [];
for (var s = 0; s < y; s++) {
matrix[i][s] = square;
content += matrix[i][s];
document.getElementById("matrixBox").innerHTML = content;
};
content += "<br>";
};
</script>
</body>
Thank you for the help!