Как создать динамическую сетку с четным количеством строк и столбцов? - PullRequest
Новая
       9

Как создать динамическую сетку с четным количеством строк и столбцов?

0 голосов
/ 14 мая 2018

Я пытаюсь создать сетку, которая принимает пользовательский ввод и использует его в качестве числа строк и столбцов.Другими словами, если пользователь вводит X, я хочу, чтобы сетка имела X строк и X столбцов и была квадратной, то есть поля были такими же высокими, как и широкими.

Я получил его для работы сСетка JavaScript и CSS, но только если я уже знаю количество строк / столбцов, в этом случае 10. См. Ниже.

Как я могу создать сетку, которая делает то же самое, но с любым количеством строк истолбцы? 

 #container {
   display: grid;
   grid-template-columns: repeat(10, 1fr);
   width: 500px;
   height: 500px;
 }

 div {
   width: 100%;
   height: 100%;
   outline: 1px solid;
   float: left;
 }
<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Etch-a-sketch</title>
  </head>

  <body>
    <h1>Etch-a-sketch</h1>
    <button id="start">Start</button>
    <div id="container"></div>
  </body>
  <script>
    let btn = document.getElementById("start")
    btn.addEventListener("click", createGrid)

    function createGrid() {
      let numberOfRows = prompt("How many rows do you want?");
      let i = 0;
      let x = numberOfRows ** 2;

      for (i; i < x; i++) {
        var div = document.createElement("div");
        document.getElementById("container").appendChild(div);
        div.addEventListener("mouseenter", function() {
          this.style.backgroundColor = "red";
        });
      }
    }

  </script>

</html>

Ответы [ 3 ]

0 голосов
/ 14 мая 2018

Измените свой CSS в соответствии с вашими потребностями. jsfiddle.net / 926pd5oh / 9 

<h1>Etch-a-sketch</h1>
<button id="start">Start</button>
<div id="container"></div>
<style>
  #container>div {
    width: 100%;
    height: 10px;
    margin: 2px;
  }

  #container>div>div {
    float: left;
    height: 10px;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    width: 25px;
  }
</style>
<script>
  let btn = document.getElementById("start")
  btn.addEventListener("click", createGrid);

  function createGrid() {
    let numberOfRows = prompt("How many rows do you want?");
    document.getElementById("container").innerHTML = "";
    console.log(numberOfRows);
    for (let i = 0; i < numberOfRows; i++) {
      var divRow = document.createElement("div");
      document.getElementById("container").appendChild(divRow);
      for (let y = 0; y < numberOfRows; y++) {
        let divCol = document.createElement("div");
        divCol.addEventListener("mouseenter", function () {
          this.style.backgroundColor = "red";
        });
        divRow.appendChild(divCol);
      }

    }
  }
</script>
0 голосов
/ 15 июня 2018

В итоге я использовал другой инструмент: container.style.gridTemplateColumns и container.style.gridTemplateRows, чтобы повлиять на количество строк и столбцов контейнера. Это позволяет мне не использовать функцию: root выше. См. Синтаксис JavaScript на https://www.w3schools.com/cssref/pr_grid-template-columns.asp

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Etch-a-sketch</title>
  </head>
  <body>
    <h1>Etch-a-sketch</h1>
    <button id="start">Start</button>
    <div id="container"></div>
  </body>
  <script>


  //randomColor function is taken from http://www.devcurry.com/2010/08/generate-random-colors-using-javascript.html //
  function randomRgb(value) {

  col =  "rgb("
  + randomColor(255) * value + ","
  + randomColor(255) * value + ","
  + randomColor(255) * value + ")";
  }

  function randomColor(num) {
    return Math.floor(Math.random() * num);
  }

  function resetColorOfBoxes() {
    boxes = document.querySelectorAll('div');
    boxes.forEach(box => box.style.backgroundColor = "white");
  }

  function promptEntry() {

    let userInput = prompt("How many rows would you like?", "Enter a number");

    if (isNaN(userInput)) {
      alert("That's not a valid entry. Try again");
      promptEntry();
    }

    else {
      createGrid(userInput);
    }
  }

  function createGrid(numberOfRows) {

    resetColorOfBoxes()

    let gridTemplateColumns = 'repeat('+numberOfRows+', 1fr)'

    var container = document.getElementById("container");
    container.style.gridTemplateColumns = gridTemplateColumns;
    container.style.gridTemplateRows = gridTemplateColumns;

    let brightness = [];

    let i = 0;
    let numberOfBoxes = numberOfRows**2;

    /*Create boxes*/
    for (i; i < numberOfBoxes ; i++) {
      brightness[i+1] = 1;
      console.log(brightness);

      var div = document.createElement("div");
      div.classList.add(i+1);
      document.getElementById("container").appendChild(div);

      div.addEventListener("mouseenter", function () {
        var className = this.className;
        brightness[className] = brightness[className] - 0.1;
        console.log(brightness[className]);
        randomRgb(brightness[className]);
        this.style.backgroundColor = col;
      });
    }
  }

  let btn = document.getElementById("start")
  btn.addEventListener("click", promptEntry)

  </script>
</html>
0 голосов
/ 14 мая 2018

Вы можете использовать переменную CSS для этого. и измените значение переменной, используя JavaScript. 

let btn = document.getElementById("start")
  btn.addEventListener("click", createGrid)

  function createGrid() {
  var Container = document.getElementById("container");
Container.innerHTML = '';
  
    let numberOfRows = prompt("How many rows do you want?");
    let i = 0;
    let x = numberOfRows * numberOfRows;
    
    document.documentElement.style.setProperty("--columns-row", numberOfRows);
    for (i =  0; i < x ; i++) {
      var div = document.createElement("div");
      document.getElementById("container").appendChild(div);
      div.addEventListener("mouseenter", function () {
      this.style.backgroundColor = "red";
    });
  }
}
:root {
  --columns-row: 2;
}

 
 #container {
      display: grid;
      grid-template-columns: repeat(var(--columns-row), 1fr);
      grid-template-rows: repeat(var(--columns-row), 1fr);
      width: 500px;
      height: 500px;
  }

  div {

     border: 1px solid #000;
  
  }
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Etch-a-sketch</title>
  </head>
  <body>
    <h1>Etch-a-sketch</h1>
    <button id="start">Start</button>
    <div id="container">
    </div>
  </body>

</html>
...