#javascript #dom #dom-events
#javascript #дом #dom-события
Вопрос:
Я пытаюсь найти способ, с помощью которого я могу создавать новые размеры сетки на основе входных данных, полученных от пользователя. Т.е. Если пользователь введет 10, он создаст на экране новую сетку размером 10×10.
До сих пор, когда пользователь нажимает на кнопку «очистить меня!», пользователю будет предложено ввести число от 2 до 100. Как только пользователь вводит номер, он опорожняет контейнер до пустого серого контейнера без границ. Я хочу, чтобы это было так, где, если пользователь вводит число, он должен создавать новые столбцы / строки сетки с границей (которая определена).
Я скопирую свой код ниже:
HTML / Javascript код:
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="etch.css">
<title>Document</title>
</head>
<body>
<input id="btn-clear" type="button" value="Clear
Page!">
<br>
<div id="container">
</div>
<script>
let container =
document.getElementById('container');
let clearPage = document.getElementById('btn-
clear');
//function to create 16x16 grid
function gridSquares() {
for(let x = 0; x < 256; x ){
let squares = document.createElement('div');
squares.className = 'grid-square';
squares.style.cssText = 'background: #eee';
squares.style.border = '0.25px solid black';
container.appendChild(squares);
//on-click event to get the etch started
squares.addEventListener('mouseover',
function() {
squares.style.cssText = 'background:
yellow';
squares.style.border = '0.25px solid
black';
})
}
/*
document.getElementById('btn-
clear').addEventListener("click", function() {
document.querySelector('div').cssText =
'background: #eee';
})*/
//btn function
document.getElementById('btn-
clear').addEventListener('click', () => {
Array.prototype.forEach.call(document.getElementById('contai ner').children, item => item.style.cssText = 'background: #eee');
// then prompt and do sth
let newGrid = window.prompt('Enter grid
dimensions ranging from 2 through 100', ' ');
for (let i = 1; i < newGrid; i ) {
let newSquares =
document.createElement('div');
let newPage =
document.querySelectorAll('container');
newSquares.className = 'new-grid';
newPage.display = 'grid';
newPage.gridTemplateColumns =
'repeat(1, 1fr)' * newGrid;
newPage.gridTemplateRows =
'repeat(1, 1fr)' * newGrid;
newPage.border = '0.25px solid
black';
}
})
}
gridSquares();
</script>
</body>
</html>
**CSS:**
```#container {
height: 98vh;
display: grid;
border: 0.25px; solid black;
/*background: #eee;*/
grid-template-columns: repeat(16, 1fr);
grid-template-rows: repeat(16, 1fr);
}
/*.grid-square {
border: 0.25px solid black;
background: #eee;
}*/
#btn-clear {
display: flex;
justify-content: center;
align-items: center;
border: 3px solid black;
}```