Why is my javascript applying css grid properties quickly disappearing?-CodePudding

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 >
      <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>

CodePudding user response：

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 >
  <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>