CODEWITHSUNDEEP
javascriptcsscss-grid
FrostByte
FrostByte

Reputation: 55

Why is my javascript applying css grid properties quickly disappearing?

I am trying to make JS function that on call sets the value of a css grid-template to information from a form however when I call it the grid appears and quickly disappears within a second. From the short amount of time it is there I can also see it is only making rows and no columns.

Edit: I added a code snippet below

let container = document.getElementById("container");

function createGrid() {
  sizeOfGrid = document.getElementById("gridSize").value;
  container.style.gridTemplate = `repeat(${sizeOfGrid}, 1fr) / repeat(${sizeOfGrid}, 1fr)`;
  for (i = 0; i < sizeOfGrid; i++) {
    for (i = 0; i < sizeOfGrid; i++) {
      console.log(`Creating grid element ${i}`);

      let gridElement = document.createElement("div");
      gridElement.classList.add("gridElement");
      container.appendChild(gridElement);
    }
  }

  gridElement = document.querySelectorAll(".gridElement");
  gridElement.addEventListener("hover", function () {
    gridElement.style.backgroundColor = "black";
  });
}
html {
    padding: 50px;
}

#container {
    display: grid;
    height: 800px;
    width: 800px;
}

.gridElement {
    background-color: rgba(69, 69, 69, 0.1);
}

.gridElement:hover {
    background-color: rgba(69, 69, 69, 0.5);
}
<html>
  <head>

    <link rel="stylesheet" href="style.css" />
  </head>
  <body>

    <div class="settings">
      <h2>Settings</h2>
      <form onsubmit="createGrid()">
        <label for="gridSize">Size of grid?</label>
        <input
          maxlength="2"
          type="number"
          name="gridSize"
          id="gridSize"
        />
        <input type="submit" value="Create!">
      </form>
    </div>



    <br>
    <br>
    <br>

    <div id="container"></div>

    <script src="script.js" async defer></script>
  </body>
</html>

Upvotes: 0

Views: 75

Answers (1)

Burham B. Soliman
Burham B. Soliman

Reputation: 1562

it seems like you're missing with your JS code, i've just changed the submit behavior, using addEventListener and changed the the loop for each result to applay the hover effect and the background,

let container = document.getElementById("container");

document.querySelector('input[type="submit"]').addEventListener('click', (e) => {
  e.preventDefault();
  sizeOfGrid = document.getElementById("gridSize").value;
  container.style.gridTemplate = `repeat(${sizeOfGrid}, 1fr) / repeat(${sizeOfGrid}, 1fr)`;
  for (i = 0; i < sizeOfGrid; i++) {
    for (i = 0; i < sizeOfGrid; i++) {
      console.log(`Creating grid element ${i}`);

      let gridElement = document.createElement("div");
      gridElement.classList.add("gridElement");
      container.appendChild(gridElement);
    }
  }

  gridElement = document.querySelectorAll(".gridElement");
  gridElement.forEach((elm) => {
    elm.addEventListener("hover", function () {
    elm.style.backgroundColor = "black";
  });
  })
})
#container {
    display: grid;
    height: 800px;
    width: 800px;
}

.gridElement {
    background-color: rgba(69, 69, 69, 0.1);
}

.gridElement:hover {
    background-color: rgba(69, 69, 69, 0.5);
}
<div class="settings">
  <h2>Settings</h2>
  <form>
    <label for="gridSize">Size of grid?</label>
    <input
      maxlength="2"
      type="number"
      name="gridSize"
      id="gridSize"
      oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
    />
    <input type="submit" value="Create!">
  </form>
</div>
<div id="container"></div>

Upvotes: 1

Related Questions