trying to resize a grid of divs for the etch-a-sketch assignment from the odinproject-CodePudding

first off, I already know that a lot of this JavaScript could have been done in the HTML.

Anyways, my issue is that I can create my initial 16x16 grid of divs (thanks stackoverflow!) but I can't resize the grid using my "More" button.

the instructions say to throw up a prompt to ask the user to input a number and then use that number for the amount of divs along one side, but I don't want to do it that way. I want to use my "More" button to increase the density of divs - an event listener for clicks (maybe dblclicks too) and then keep adding divs as the user keeps clicking the button. And then decrease with the "Less" button. But don't tell me how to do that part. I can figure it out once the "More" button works.

Some people have been using a slider bar to increase the number of divs, but I haven't been able to translate that code into using a button.

I had it working the other day but my color buttons stopped working.

Any ways, I'm still psyched on learning this stuff but getting kinda irked at not being able to figure this out

I'm assuming I need to implement a "counter" function that keeps track of the number of button clicks and then input that number into my "makeDivs" function?

My "moreDivs" function calls a function, killDivs(), that does away with the pre-existing divs. Am I on the right track there? Do I need to wipe out the pre-existing divs? Or can I just add to the divs that are already there?

I hate to just dump my whole js file on here but...

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

And my 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 >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;
}

CodePudding user response：

I made three changes to get the More button working as you'll see below. One issue was that moreDivs() was being called without passing in the event object. The other issue was that moreDivs() was expecting num to be passed as a second argument whereas I think you meant to refer to the gloabl num variable.

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 >Etch-A-Sketch</h1>
    <div id="container">
    </div>
    <script src="./main.js"></script>
</body>
</html>