尝试为odinproject的蚀刻草图分配调整div网格的大小

首先，我已经知道很多JavaScript可以在HTML中完成.

无论如何，我的问题是，我可以创建我的初始的16x16网格div(感谢stackoverflow!)，但我不能使用我的"More"按钮。

的说明说，弹出一个提示，要求用户输入一个数字，然后使用该数字的div沿着一边的数量，但我不想这样做。我想用我的"more"按钮来增加div的密度—一个用于单击的事件侦听器(也可能是dblclicks)，然后随着用户不断单击按钮而不断添加div。然后随着"减少"而减少;按钮。但别告诉我该怎么做。一旦"更多"我就能弄清楚;按钮工作。

有些人一直在使用滑动条来增加div的数量，但我还没有能够将代码转换为使用按钮。

前几天我还能用，但是我的颜色按钮不工作了。

无论如何，我仍然对学习这些东西感到兴奋，但对不能弄清楚这些东西感到有点厌烦

假设我需要实现一个"counter"函数，它可以记录按钮点击的次数，然后将这个数字输入到我的"makediv"中。函数?

我"moreDivs"函数调用函数killDivs()，该函数会删除先前存在的div。我的思路对吗?我需要清除原有的潜水吗?或者我可以把已经存在的div加进去?

我讨厌把整个js文件都放到这里，但是…

const btnContainer = document.createElement("div");
btnContainer.classList.add("btn-container");
const resetBtn = document.createElement("button");
resetBtn.textContent = "Reset";
const eraserBtn = document.createElement("button");
eraserBtn.textContent = "Eraser";
const moreBtn = document.createElement("button");
moreBtn.textContent = "More";
const lessBtn = document.createElement("button");
lessBtn.textContent = "Less";
const whiteBtn = document.createElement("button");
whiteBtn.textContent = "White";
const blackBtn = document.createElement("button");
blackBtn.textContent = "Black";
const colorBtn = document.createElement("button");
colorBtn.textContent = "Color";
btnContainer.append(
resetBtn,
eraserBtn,
moreBtn,
lessBtn,
whiteBtn,
blackBtn,
colorBtn
);
const h1 = document.getElementsByTagName("h1");
h1[0].insertAdjacentElement("afterend", btnContainer);
const btns = document.querySelectorAll("button");
btns.forEach((btn) => {
btn.className = "btn";
btn.addEventListener("click", () => {
switch (btn) {
case resetBtn:
resetDivs();
break;
case eraserBtn:
eraseDivs();
break;
case moreBtn:
moreDivs();
break;
case lessBtn:
lessDivs();
break;
case whiteBtn:
whiteDivs();
break;
case blackBtn:
console.log("hi");
blackDivs();
break;
case colorBtn:
changeColor();
break;
}
});
});
var num = 16;
function makeDivs(num) {
container.style.display = "grid";
container.style.gridTemplateRows = `repeat(${num}, 1fr)`;
container.style.gridTemplateColumns = `repeat(${num}, 1fr)`;
for (let i = 0; i < num * num; i++) {
const square = document.createElement("div");
square.className = "square";
container.append(square);
}
}
makeDivs(num);
const squares = document.querySelectorAll(".square");
function resetDivs() {
squares.forEach((square) => {
square.style.background = "beige";
});
}
function eraseDivs() {
squares.forEach((square) => {
square.addEventListener("pointerover", () => {
square.style.background = "beige";
});
});
}
moreBtn.addEventListener("click", (event, num) => {
let clicks = num++;
event.stopPropagation();
});
moreBtn.addEventListener("dblclick", (event, num) => {
let clicks = num + 3;
event.stopPropagation();
});
moreBtn.onclick = counter;
moreBtn.ondblclick = counter;
function counter() {
num += 3;
}
function moreDivs(event, num) {
let clicks = num + 3;
event.stopPropagation();
console.log(clicks);
killDivs();
makeDivs(clicks);
}
function lessDivs() {
console.log("are there less divs yet?");
}
function whiteDivs() {
squares.forEach((square) => {
square.addEventListener("pointerover", () => {
square.style.background = "white";
});
});
}
function blackDivs() {
squares.forEach((square) => {
square.addEventListener("pointerover", () => {
square.style.background = "black";
});
});
}
function changeColor() {
const r = Math.floor(Math.random() * 255);
const g = Math.floor(Math.random() * 255);
const b = Math.floor(Math.random() * 255);
const randomColor = `rgb(${r}, ${g}, ${b})`;
squares.forEach((square) => {
square.addEventListener("pointerover", () => {
square.style.background = randomColor;
});
});
}
function killDivs() {
while (container.firstChild) {
container.removeChild(container.firstChild);
}
}
//       ***NOTE TO SELF***            see:
//  @chewdev on github for touchevent code example

我的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>
<!-- <link rel="preconnect" href="https://fonts.googleapis.com"> -->
<!-- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> -->
<!-- <link href="https://fonts.googleapis.com/css2?family=Fredericka+the+Great&display=swap" rel="stylesheet">  -->
<link rel="stylesheet" href="./style.css">
</head>
<body>
<h1 class="title">Etch-A-Sketch</h1>
<div id="container">
</div>
<script src="./main.js"></script>
</body>
</html>

* {
/* box-sizing: border-box; */
margin: 0;
padding: 0;
}
body {
min-height: 100vh;
background: rgb(233, 196, 137);
font-size: 2.5em;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.35);
}
.title {
font-family: "Fredericka the Great", cursive;
font-size: 6rem;
letter-spacing: 3px;
text-align: center;
padding: 20px 0 5px;
color: maroon;
}
.btn-container {
border-bottom: 3px solid maroon;
border-top: 3px solid maroon;
height: 2.5em;
display: flex;
justify-content: center;
align-items: center;
gap: 2.5%;
}
.btn {
font-size: 1.1rem;
color: maroon;
letter-spacing: 1px;
font-weight: bold;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25);
border: 2px solid maroon;
border-radius: 10px;
width: 5em;
height: 2.25em;
}
#container {
margin: 1em auto 0;
height: 512px;
width: 512px;
border-top: 2px solid maroon;
border-left: 2px solid maroon;
border-right: 3px solid maroon;
border-bottom: 3px solid maroon;
box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.35);
}
.square {
border-top: 1px solid maroon;
border-left: 1px solid maroon;
background: beige;
}

我做了三个修改来让More按钮工作，如下所示。一个问题是在没有传入event对象的情况下调用moreDivs()。另一个问题是moreDivs()期望num作为第二个参数传递，而我认为你的意思是指全局num变量。

const btnContainer = document.createElement("div");
btnContainer.classList.add("btn-container");
const resetBtn = document.createElement("button");
resetBtn.textContent = "Reset";
const eraserBtn = document.createElement("button");
eraserBtn.textContent = "Eraser";
const moreBtn = document.createElement("button");
moreBtn.textContent = "More";
const lessBtn = document.createElement("button");
lessBtn.textContent = "Less";
const whiteBtn = document.createElement("button");
whiteBtn.textContent = "White";
const blackBtn = document.createElement("button");
blackBtn.textContent = "Black";
const colorBtn = document.createElement("button");
colorBtn.textContent = "Color";
btnContainer.append(
resetBtn,
eraserBtn,
moreBtn,
lessBtn,
whiteBtn,
blackBtn,
colorBtn
);
const h1 = document.getElementsByTagName("h1");
h1[0].insertAdjacentElement("afterend", btnContainer);
const btns = document.querySelectorAll("button");
btns.forEach((btn) => {
btn.className = "btn";

//  btn.addEventListener("click", () => { //old
btn.addEventListener("click", (e) => { //new



switch (btn) {
case resetBtn:
resetDivs();
break;
case eraserBtn:
eraseDivs();
break;
case moreBtn:



//        moreDivs(); //old
moreDivs(e); //new



break;
case lessBtn:
lessDivs();
break;
case whiteBtn:
whiteDivs();
break;
case blackBtn:
console.log("hi");
blackDivs();
break;
case colorBtn:
changeColor();
break;
}
});
});
var num = 16;
function makeDivs(num) {
container.style.display = "grid";
container.style.gridTemplateRows = `repeat(${num}, 1fr)`;
container.style.gridTemplateColumns = `repeat(${num}, 1fr)`;
for (let i = 0; i < num * num; i++) {
const square = document.createElement("div");
square.className = "square";
container.append(square);
}
}
makeDivs(num);
const squares = document.querySelectorAll(".square");
function resetDivs() {
squares.forEach((square) => {
square.style.background = "beige";
});
}
function eraseDivs() {
squares.forEach((square) => {
square.addEventListener("pointerover", () => {
square.style.background = "beige";
});
});
}
moreBtn.addEventListener("click", (event, num) => {
let clicks = num++;
event.stopPropagation();
});
moreBtn.addEventListener("dblclick", (event, num) => {
let clicks = num + 3;
event.stopPropagation();
});
moreBtn.onclick = counter;
moreBtn.ondblclick = counter;
function counter() {
num += 3;
}


//function moreDivs(event, num) { //old
function moreDivs(event) { //new

let clicks = num + 3;
event.stopPropagation();
console.log(clicks);
killDivs();
makeDivs(clicks);
}
function lessDivs() {
console.log("are there less divs yet?");
}
function whiteDivs() {
squares.forEach((square) => {
square.addEventListener("pointerover", () => {
square.style.background = "white";
});
});
}
function blackDivs() {
squares.forEach((square) => {
square.addEventListener("pointerover", () => {
square.style.background = "black";
});
});
}
function changeColor() {
const r = Math.floor(Math.random() * 255);
const g = Math.floor(Math.random() * 255);
const b = Math.floor(Math.random() * 255);
const randomColor = `rgb(${r}, ${g}, ${b})`;
squares.forEach((square) => {
square.addEventListener("pointerover", () => {
square.style.background = randomColor;
});
});
}
function killDivs() {
while (container.firstChild) {
container.removeChild(container.firstChild);
}
}
//       ***NOTE TO SELF***            see:
//  @chewdev on github for touchevent code example

* {
/* box-sizing: border-box; */
margin: 0;
padding: 0;
}
body {
min-height: 100vh;
background: rgb(233, 196, 137);
font-size: 2.5em;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.35);
}
.title {
font-family: "Fredericka the Great", cursive;
font-size: 6rem;
letter-spacing: 3px;
text-align: center;
padding: 20px 0 5px;
color: maroon;
}
.btn-container {
border-bottom: 3px solid maroon;
border-top: 3px solid maroon;
height: 2.5em;
display: flex;
justify-content: center;
align-items: center;
gap: 2.5%;
}
.btn {
font-size: 1.1rem;
color: maroon;
letter-spacing: 1px;
font-weight: bold;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25);
border: 2px solid maroon;
border-radius: 10px;
width: 5em;
height: 2.25em;
}
#container {
margin: 1em auto 0;
height: 512px;
width: 512px;
border-top: 2px solid maroon;
border-left: 2px solid maroon;
border-right: 3px solid maroon;
border-bottom: 3px solid maroon;
box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.35);
}
.square {
border-top: 1px solid maroon;
border-left: 1px solid maroon;
background: beige;
}

<!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>
<!-- <link rel="preconnect" href="https://fonts.googleapis.com"> -->
<!-- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> -->
<!-- <link href="https://fonts.googleapis.com/css2?family=Fredericka+the+Great&display=swap" rel="stylesheet">  -->
<link rel="stylesheet" href="./style.css">
</head>
<body>
<h1 class="title">Etch-A-Sketch</h1>
<div id="container">
</div>
<script src="./main.js"></script>
</body>
</html>

相关内容

最新更新

热门标签：