Próbuję zbudować wytrawiony szkic,

Użytkownik otrzymuje monit o wpisanie liczby kwadratów (elementów div), które chciałby umieścić w siatce, ale nie jestem w stanie zorganizować tych elementów div w siatkę.

Oto mój kod (pamiętaj, że wiem, że „grid-template-rows” i „grid-template-columns” są niepoprawne, to jest po prostu punkt, do którego muszę)

const container = document.getElementById('container')
const div = document.createElement('div')
const butt = document.getElementById('reset')


function changeColor() {

    event.target.setAttribute('style', 'background-color: #434141;')
}


function makeGrid(x) {

    x = prompt('how many squares (? by ?)')


    let i = 0;

    while (i < x * x) {

        let dye = document.createElement('div')
        dye.classList.add('dye')
        container.appendChild(dye)

        i++;

        dye.addEventListener('mouseover', changeColor)

        butt.addEventListener('click', () => {
            dye.setAttribute('style', 'background-color: grey;')
        })

    }

}
makeGrid()
#container {
    display: grid;
     grid-template-rows: auto;
     grid-template-columns: 1fr 1fr;
    background-color: #2196F3;
    width: 600px;
    height: 600px;
    margin: auto;
    margin-top: 60px;
    max-height: 600px;
    max-width: 600px;
   
}

.dye {
    background-color: grey;
    border: solid black 1px;
}



#reset{
    color: white;
    background-color: black;
    margin-left: 500px;
    margin-top: 20px;
    outline: none;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" href="style.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div id="container">
        
    </div>
<button id="reset">Reset Grid</button>
    <script src="index.js"></script>
</body>

</html>

Każda pomoc byłaby bardzo mile widziana!

0
j roc 2 kwiecień 2020, 23:51

3 odpowiedzi

Najlepsza odpowiedź

Możesz zmienić kolumny szablonu siatki za pomocą javascript, aby dynamicznie dodać liczbę kolumn za pomocą powtórz wartość.

document.getElementById('container').style.gridTemplateColumns = `repeat(${x}, 1fr)`
const container = document.getElementById('container')
const div = document.createElement('div')
const butt = document.getElementById('reset')


function changeColor() {

    event.target.setAttribute('style', 'background-color: #434141;')
}


function makeGrid(x) {

    x = prompt('how many squares (? by ?)')


    let i = 0;
    
    document.getElementById('container').style.gridTemplateColumns = `repeat(${x}, 1fr)` 

    while (i < x * x) {

        let dye = document.createElement('div')
        dye.classList.add('dye')
        container.appendChild(dye)

        i++;

        dye.addEventListener('mouseover', changeColor)

        butt.addEventListener('click', () => {
            dye.setAttribute('style', 'background-color: grey;')
        })

    }

}
makeGrid()
#container {
    display: grid;
     grid-template-rows: auto;
     grid-template-columns: 1fr 1fr;
    background-color: #2196F3;
    width: 600px;
    height: 600px;
    margin: auto;
    margin-top: 60px;
    max-height: 600px;
    max-width: 600px;
   
}

.dye {
    background-color: grey;
    border: solid black 1px;
}



#reset{
    color: white;
    background-color: black;
    margin-left: 500px;
    margin-top: 20px;
    outline: none;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" href="style.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div id="container">
        
    </div>
<button id="reset">Reset Grid</button>
    <script src="index.js"></script>
</body>

</html>
2
Sølve Tornøe 2 kwiecień 2020, 21:07

Możesz użyć flexbox dla better browser support i jest łatwy w użyciu.

const container = document.getElementById("container");
const div = document.createElement("div");
const butt = document.getElementById("reset");

function changeColor() {
  event.target.style.backgroundColor = "#434141";
}

function makeGrid(x) {
  let num = prompt("how many squares (? by ?)");
  num = Number(num);
  const containerW = 600;
  for (let i = 0; i < num * num; i++) {
    let dye = document.createElement("div");
    dye.classList.add("dye");
    dye.style.flexBasis = `${Math.floor(containerW / num - 4)}px`;
    dye.style.height = `${Math.floor(containerW / num - 4)}px`;
    dye.addEventListener("mouseover", changeColor);
    container.appendChild(dye);
  }
  butt.addEventListener("click", () => {
    document
      .querySelectorAll(".dye")
      .forEach(dye => (dye.style.backgroundColor = "grey"));
  });
}
makeGrid();
#container {
  display: flex;
  flex-wrap: wrap;
  background-color: #2196F3;
  justify-content: space-evenly;
  width: 600px;
  height: 600px;
  margin: auto;
  margin-top: 60px;
  max-height: 600px;
  max-width: 600px;
}

.dye {
  background-color: grey;
  border: solid black 1px;
}

#reset {
  color: white;
  background-color: black;
  margin-left: 500px;
  margin-top: 20px;
  outline: none;
}
.snippet-result-code {
 height: 700px!important;
}
<div id="container">

    </div>
    <button id="reset">Reset Grid</button>
    <script src="app.js"></script>
1
xdeepakv 2 kwiecień 2020, 21:21

Nie musisz deklarować zdarzenia za każdym razem, gdy wykonywana jest pętla
możesz też użyć .style.backgroundColor do zmiany BGC zamiast przypisywania nowej właściwości stylu

function changeColor() {
    event.target.setAttribute('style', 'background-color: #434141;')
}


function makeGrid() {

    x = prompt('how many squares (? by ?)')
    let z = 0;
    while (z < x * x) {

        let dye = document.createElement('div')
        dye.classList.add('dye')
        container.appendChild(dye)
        z++;
    }

    let squares = document.getElementById('container').querySelectorAll('.dye');
    for (j = 0; j < squares.length; j++) {
        squares[j].addEventListener('mouseover', changeColor)
    }

    document.getElementById('reset').addEventListener('click', () => {
        for (i = 0; i < squares.length; i++) {
            // squares[i] = each  dye element
            squares[i].style.backgroundColor = 'gray';
        }
    });
}
makeGrid()
      #container {
        display: grid;
        grid-template-rows: auto;
        grid-template-columns: 1fr 1fr;
        background-color: #2196f3;
        width: 600px;
        height: 600px;
        margin: auto;
        margin-top: 60px;
        max-height: 600px;
        max-width: 600px;
      }

      .dye {
        background-color: grey;
        border: solid black 1px;
      }

      #reset {
        color: white;
        background-color: black;
        margin-left: 500px;
        margin-top: 20px;
        outline: none;
      }
    <div id="container"></div>
    <button id="reset">Reset Grid</button>
1
BrightFaith 2 kwiecień 2020, 21:10