无法从 JavaScript 中的 div 中删除数字
Can't remove numbers from my divs in JavaScript
我正在 JavaScript 中构建游戏,内置基本网格布局 JavaScript,并且无法从中删除数字 (1, 2, 3, 4...)网格的左上角(下图)。
我认为它们是作为我的 JavaScript 的一部分生成的,但是,我无法删除它们。我试过查看我的 CSS,但无法在任何地方找到它。有人可以帮忙吗?
JavaScript
function init() {
// DOM Elements
const grid = document.querySelector('.grid')
const cells = []
let linkPosition = 0
// Grid Values
const width = 10
const cellCount = width * width
// Function
function createGrid() {
for (let i = 0; i < cellCount; i++) {
const cell = document.createElement('div')
cells.push(cell)
cell.innerHTML = i
grid.appendChild(cell)
}
cells[linkPosition].classList.add('link')
}
createGrid()
}
window.addEventListener('DOMContentLoaded', init)
CSS
/* Misc */
* {
box-sizing: border-box;
}
body {
height: 100vh;
margin: 0;
background-color: #F9F9F3;
}
p {
font-family: 'Cinzel', serif;
font-weight: 400;
}
span {
font-family: 'Cinzel', serif;
font-weight: 700;
}
/* Heading Wrapper */
.heading-wrapper {
height: 140px;
width: 100%;
display: flex;
justify-content: center;
}
.heading {
display: flex;
justify-content: center;
align-items: center;
height: auto;
width: auto;
}
.heading img {
height: 60px;
width: 300px;
}
/* Controls Wrapper */
.controls-wrapper {
height: 100px;
display: flex;
justify-content: space-evenly;
align-items: center;
}
/* Grid Layout */
.grid-wrapper {
height: 90vh;
display: flex;
justify-content: center;
}
.grid {
align-items: center;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2);
display: flex;
flex-wrap: wrap;
height: 100%;
justify-content: center;
height: 800px;
width: 800px;
background-image: url('../assets/background-image.jpg');
background-size: cover;
}
.grid div {
border: 1px solid lightgrey;
flex-grow: 1;
height: 10%;
width: 10%;
}
.grid div.link {
background-image: url('../assets/link.png');
background-repeat: no-repeat;
background-size: contain;
cursor: pointer;
}
您可以删除此行:
cell.innerHTML = i
在您 JavaScript 的这个函数中,我不明白 - 为什么您需要 cell.innerHTML = i
所在的行?你需要一些理由吗?如果没有,我想只要删除这一行就可以了。
// Function
function createGrid() {
for (let i = 0; i < cellCount; i++) {
const cell = document.createElement('div')
cells.push(cell)
cell.innerHTML = i // This line maybe remove it if not necessary in other function
grid.appendChild(cell)
}
我正在 JavaScript 中构建游戏,内置基本网格布局 JavaScript,并且无法从中删除数字 (1, 2, 3, 4...)网格的左上角(下图)。
我认为它们是作为我的 JavaScript 的一部分生成的,但是,我无法删除它们。我试过查看我的 CSS,但无法在任何地方找到它。有人可以帮忙吗?
JavaScript
function init() {
// DOM Elements
const grid = document.querySelector('.grid')
const cells = []
let linkPosition = 0
// Grid Values
const width = 10
const cellCount = width * width
// Function
function createGrid() {
for (let i = 0; i < cellCount; i++) {
const cell = document.createElement('div')
cells.push(cell)
cell.innerHTML = i
grid.appendChild(cell)
}
cells[linkPosition].classList.add('link')
}
createGrid()
}
window.addEventListener('DOMContentLoaded', init)
CSS
/* Misc */
* {
box-sizing: border-box;
}
body {
height: 100vh;
margin: 0;
background-color: #F9F9F3;
}
p {
font-family: 'Cinzel', serif;
font-weight: 400;
}
span {
font-family: 'Cinzel', serif;
font-weight: 700;
}
/* Heading Wrapper */
.heading-wrapper {
height: 140px;
width: 100%;
display: flex;
justify-content: center;
}
.heading {
display: flex;
justify-content: center;
align-items: center;
height: auto;
width: auto;
}
.heading img {
height: 60px;
width: 300px;
}
/* Controls Wrapper */
.controls-wrapper {
height: 100px;
display: flex;
justify-content: space-evenly;
align-items: center;
}
/* Grid Layout */
.grid-wrapper {
height: 90vh;
display: flex;
justify-content: center;
}
.grid {
align-items: center;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2);
display: flex;
flex-wrap: wrap;
height: 100%;
justify-content: center;
height: 800px;
width: 800px;
background-image: url('../assets/background-image.jpg');
background-size: cover;
}
.grid div {
border: 1px solid lightgrey;
flex-grow: 1;
height: 10%;
width: 10%;
}
.grid div.link {
background-image: url('../assets/link.png');
background-repeat: no-repeat;
background-size: contain;
cursor: pointer;
}
您可以删除此行:
cell.innerHTML = i
在您 JavaScript 的这个函数中,我不明白 - 为什么您需要 cell.innerHTML = i
所在的行?你需要一些理由吗?如果没有,我想只要删除这一行就可以了。
// Function
function createGrid() {
for (let i = 0; i < cellCount; i++) {
const cell = document.createElement('div')
cells.push(cell)
cell.innerHTML = i // This line maybe remove it if not necessary in other function
grid.appendChild(cell)
}