[ad_1]
Asked
Viewed
6 times
So I’m trying to do a small atari breakout project really quick, but I’ve spent a while on this simple error now. I’m applying inline style to a div with class block, but when the code is processed by the browser, most of the styles (width and bottom) don’t apply– just the left. I included the CSS, JS, and resulting DOM.
const grid = document.querySelector(".grid");
const blockHeight = 20;
const blocks = [];
class Block {
constructor(xAxis, yAxis, blockWidth) {
this.bottomLeft = [xAxis, yAxis];
this.bottomRight = [xAxis + blockWidth, yAxis];
this.topLeft = [xAxis, yAxis + blockHeight];
this.topRight = [xAxis + blockWidth, yAxis + blockHeight];
blocks.push(this);
}
}
function drawBlock(x, y, blockWidth) {
new Block(x, y, blockWidth);
const block = document.createElement("div");
block.classList.add("block");
block.style.width = blockWidth;
block.style.left = x;
block.style.bottom = y;
grid.appendChild(block); //from the bottom of the grid
console.log("drew a block of size " + blockWidth + " at " + x + "," + y);
}
drawBlock(0, 20, 200);.grid {
position: absolute;
width: 800px;
height: 400px;
border: solid black 1px;
display: flex;
flex-wrap: wrap;
}
.block {
position: absolute;
height: 20px;
background-color: blue;
border: solid blue 5px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Atari Breakout</title>
<link rel="stylesheet" href="https://stackoverflow.com/questions/72440440/atari.css">
</head>
<body>
<div class="grid">
</div>
<script src="atari.js"></script>
</body>
</html>The DOM Looks like this in the end:
DOM
asked 2 mins ago
boredsherbet is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
1
default
[ad_2]