英文:
Resize grid causing issues. (etch-a-sketch TOP)
问题
你可以尝试修改 setSize 函数中的代码，将 ${size} 替换为 ${x}，以确保正确设置网格的大小。这应该解决你在改变网格大小时出现的问题。
修改后的代码如下：
function setSize () {
let x = prompt("What size grid? (Up to 100)")
container.style.gridTemplateRows = `repeat(${x}, 1fr)`;
container.style.gridTemplateColumns = `repeat(${x}, 1fr)`;
if (x > 100){
alert("Must be 100 or less")
}
else {
createGrid(x)
}
}
这样，当你使用 setSize 函数时，网格的大小将根据你输入的值进行正确设置。
英文:
Doing the etch-a-sketch project for the odin project and I've got the grid itself working ok so long as it stays at the default size. When I try to use the setSize function though, it tends to push all the divs upwards in the container and I'm not sure how to solve that issue. It's especially obvious when resizing to a larger than 16x16 grid.
html:
<!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>ETCH-A-SKETCH</title>
</head>
<body>
<h1>Etch-a-Sketch</h1>
<div class="content">
<div class="buttonCon">
<div class="buttons">
<button id="eraser">Eraser</button>
<button id="reset">Reset</button>
<button id="setSize">Set Size</button>
<button id="pink">Pink</button>
</div>
</div>
<div class="container">
</div>
</div>
<div class="footer">
❤️ BigSlyphhh ❤️
</div>
<link rel="stylesheet" href="style.css">
<script src="java.js"></script>
</body>
</html>```
javascript:
``~
const container = document.querySelector(".container");
const eraser = document.getElementById("eraser");
const size = document.getElementById("setSize");
const pink = document.getElementById("pink");
const reset = document.getElementById("reset");
function createGrid(size){
container.style.gridTemplateRows = `repeat(${size}, 1fr)`;
container.style.gridTemplateColumns = `repeat(${size}, 1fr)`;
for (let i = 0 ; i < (size*size); i++) {
let cell = document.createElement("div");
cell.style.backgroundColor = "white";
cell.style.border = "white solid 0.1px";
container.appendChild(cell);
cell.addEventListener('mouseover', e=> {
cell.style.backgroundColor = "pink";
})
eraser.addEventListener('click', e=> {
cell.addEventListener('mouseover', e=> {
cell.style.backgroundColor = "white";
})
})
pink.addEventListener('click', e=> {
cell.addEventListener('mouseover', e=> {
cell.style.backgroundColor = "pink";
})
})
function resetGrid(){
reset.addEventListener('click', e=>{
cell.style.backgroundColor = "white";
})
}
resetGrid()
}
}
createGrid(16)
function setSize () {
let x = prompt("What size grid? (Up to 100)")
container.style.gridTemplateRows = `repeat(${size}, 1fr)`;
container.style.gridTemplateColumns = `repeat(${size}, 1fr)`;
if (x > 100){
alert("Must be 100 or less")
}
else {
createGrid(x)
}
}
size.addEventListener('click', e =>{
setSize()
})
Css:
html {
background-color: rgb(248, 222, 226);
}
body {
margin: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
font-family: CerebriSans-Regular,-apple-system,system-ui,Roboto,sans-serif;
}
.content {
display: flex;
align-items: center;
justify-content: center;
}
.container {
width: 700px;
height: 700px;
display: grid;
margin: 10px;
border: 4px solid rgb(244, 215, 215);
border-radius: 5px;
}
h1 {
text-align: center;
font-weight: 900;
color: white;
font-size: 55px;
text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
}
.buttonCon {
width: 200px;
height: 90px;
padding: 10px;
margin: 5px;
background-color: white;
border:4px rgb(244, 215, 215) solid;
}
.footer {
display: flex;
align-items: center;
justify-content: center;
}
/* CSS for button design from cssscan, edited to suit color-scheme*/
button {
background-color: pink;
border-radius: 100px;
box-shadow: rgba(252, 196, 246, 0.657) 0 -25px 18px -14px inset,rgba(245, 202, 237, 0.948) 0 1px 2px,rgb(238, 185, 234) 0 2px 4px,rgb(255, 185, 235) 0 4px 8px,rgba(241, 192, 230, 0.484) 0 8px 16px,rgb(255, 220, 254) 0 16px 32px;
color: white;
cursor: pointer;
display: inline-block;
font-family: CerebriSans-Regular,-apple-system,system-ui,Roboto,sans-serif;
padding: 3px 20px;
text-align: center;
text-decoration: none;
transition: all 250ms;
border: 0;
font-size: 16px;
margin: 6px;
}
button:hover {
box-shadow: rgb(238, 173, 230) 0 -25px 18px -14px inset,rgba(248, 186, 237, 0.948) 0 1px 2px,rgb(255, 177, 250) 0 2px 4px,rgb(244, 171, 223) 0 4px 8px,rgb(203, 163, 194) 0 8px 16px,rgb(242, 202, 241) 0 16px 32px;
transform: scale(1.05) rotate(-1deg);
}
.footer {
color: white;
}
javascript:
const container = document.querySelector(".container");
const eraser = document.getElementById("eraser");
const size = document.getElementById("setSize");
const pink = document.getElementById("pink");
const reset = document.getElementById("reset");
function createGrid(size){
container.style.gridTemplateRows = `repeat(${size}, 1fr)`;
container.style.gridTemplateColumns = `repeat(${size}, 1fr)`;
for (let i = 0 ; i < (size*size); i++) {
let cell = document.createElement("div");
cell.style.backgroundColor = "white";
cell.style.border = "white solid 0.1px";
container.appendChild(cell);
cell.addEventListener('mouseover', e=> {
cell.style.backgroundColor = "pink";
})
eraser.addEventListener('click', e=> {
cell.addEventListener('mouseover', e=> {
cell.style.backgroundColor = "white";
})
})
pink.addEventListener('click', e=> {
cell.addEventListener('mouseover', e=> {
cell.style.backgroundColor = "pink";
})
})
function resetGrid(){
reset.addEventListener('click', e=>{
cell.style.backgroundColor = "white";
})
}
resetGrid()
}
}
createGrid(16)
function setSize () {
let x = prompt("What size grid? (Up to 100)")
container.style.gridTemplateRows = `repeat(${size}, 1fr)`;
container.style.gridTemplateColumns = `repeat(${size}, 1fr)`;
if (x > 100){
alert("Must be 100 or less")
}
else {
createGrid(x)
}
}
size.addEventListener('click', e =>{
setSize()
})
答案1
得分: 0
以下是翻译好的部分：
当你开始时，创建了16x16个 div 元素。
然后，当用户输入新的大小时，你创建了更多的 div 元素，它们被添加到现有的 div 元素之后。
比如，如果用户要求一个20x20的网格，你最终会有16x16 + 20x20 个 div 元素。
但是 CSS 网格只有20行，所以最后的16x16个 div 元素没有正确的网格单元高度。但它们已经被添加了边框，因此它们是可见的，至少它们的边框是可见的。尝试将边框颜色设置为红色，你会看到网格底部有红色的条纹。
所以，在创建新的 div 元素之前，移除已经存在的 div 元素。
以下的代码片段演示了如何实现这一点，通过清空容器的 innerHTML。
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<style>
/* CSS 样式代码 */
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 头部内容 -->
</head>
<body>
<h1>Etch-a-Sketch</h1>
<div class="content">
<div class="buttonCon">
<div class="buttons">
<button id="eraser">Eraser</button>
<button id="reset">Reset</button>
<button id="setSize">Set Size</button>
<button id="pink">Pink</button>
</div>
</div>
<div class="container">
</div>
</div>
<div class="footer">
❤️ BigSlyphhh ❤️
</div>
<link rel="stylesheet" href="style.css">
<script src="java.js"></script>
</body>
</html>
<script>
// JavaScript 代码
</script>
<!-- end snippet -->
希望这有所帮助。
英文:
When you start you create 16x16 divs.
Then when the user types in a new size you create even more divs which get added onto the end of the existing ones.
say the user asks for a grid of 20. You end up with 1616 + 20x20 divs.
But the CSS grid has only 20 rows, so the last 16x16 divs don't have proper grid cell height. But they have been given borders. So they are visible, or at least their borders are. Try making the border color red and you will see the red strip at the bottom of the grid.
So, remove the divs that already exist before creating any new ones.
This snippet just does it lazily by emptying the containers innerHTML as a demo.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<style>
html {
background-color: rgb(248, 222, 226);
}
body {
margin: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
font-family: CerebriSans-Regular, -apple-system, system-ui, Roboto, sans-serif;
}
.content {
display: flex;
align-items: center;
justify-content: center;
}
.container {
width: 700px;
height: 700px;
display: grid;
margin: 10px;
border: 4px solid rgb(244, 215, 215);
border-radius: 5px;
}
h1 {
text-align: center;
font-weight: 900;
color: white;
font-size: 55px;
text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
}
.buttonCon {
width: 200px;
height: 90px;
padding: 10px;
margin: 5px;
background-color: white;
border: 4px rgb(244, 215, 215) solid;
}
.footer {
display: flex;
align-items: center;
justify-content: center;
}
/* CSS for button design from cssscan, edited to suit color-scheme*/
button {
background-color: pink;
border-radius: 100px;
box-shadow: rgba(252, 196, 246, 0.657) 0 -25px 18px -14px inset, rgba(245, 202, 237, 0.948) 0 1px 2px, rgb(238, 185, 234) 0 2px 4px, rgb(255, 185, 235) 0 4px 8px, rgba(241, 192, 230, 0.484) 0 8px 16px, rgb(255, 220, 254) 0 16px 32px;
color: white;
cursor: pointer;
display: inline-block;
font-family: CerebriSans-Regular, -apple-system, system-ui, Roboto, sans-serif;
padding: 3px 20px;
text-align: center;
text-decoration: none;
transition: all 250ms;
border: 0;
font-size: 16px;
margin: 6px;
}
button:hover {
box-shadow: rgb(238, 173, 230) 0 -25px 18px -14px inset, rgba(248, 186, 237, 0.948) 0 1px 2px, rgb(255, 177, 250) 0 2px 4px, rgb(244, 171, 223) 0 4px 8px, rgb(203, 163, 194) 0 8px 16px, rgb(242, 202, 241) 0 16px 32px;
transform: scale(1.05) rotate(-1deg);
}
.footer {
color: white;
}
</style>
<!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>ETCH-A-SKETCH</title>
</head>
<body>
<h1>Etch-a-Sketch</h1>
<div class="content">
<div class="buttonCon">
<div class="buttons">
<button id="eraser">Eraser</button>
<button id="reset">Reset</button>
<button id="setSize">Set Size</button>
<button id="pink">Pink</button>
</div>
</div>
<div class="container">
</div>
</div>
<div class="footer">
❤️ BigSlyphhh ❤️
</div>
<link rel="stylesheet" href="style.css">
<script src="java.js"></script>
</body>
</html>
<script>
const container = document.querySelector(".container");
const eraser = document.getElementById("eraser");
const size = document.getElementById("setSize");
const pink = document.getElementById("pink");
const reset = document.getElementById("reset");
function createGrid(size) {
container.style.gridTemplateRows = `repeat(${size}, 1fr)`;
container.style.gridTemplateColumns = `repeat(${size}, 1fr)`;
container.innerHTML = '';
for (let i = 0; i < (size * size); i++) {
let cell = document.createElement("div");
cell.style.backgroundColor = "white";
cell.style.border = "white solid 0.1px";
cell.style.boxSizing = "border-box";
container.appendChild(cell);
cell.addEventListener('mouseover', e => {
cell.style.backgroundColor = "pink";
})
eraser.addEventListener('click', e => {
cell.addEventListener('mouseover', e => {
cell.style.backgroundColor = "white";
})
})
pink.addEventListener('click', e => {
cell.addEventListener('mouseover', e => {
cell.style.backgroundColor = "pink";
})
})
function resetGrid() {
reset.addEventListener('click', e => {
cell.style.backgroundColor = "white";
})
}
resetGrid()
}
}
createGrid(16)
function setSize() {
let x = prompt("What size grid? (Up to 100)")
container.style.gridTemplateRows = `repeat(${size}, 1fr)`;
container.style.gridTemplateColumns = `repeat(${size}, 1fr)`;
if (x > 100) {
alert("Must be 100 or less")
} else {
createGrid(x)
}
}
size.addEventListener('click', e => {
setSize()
})
</script>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论