How to append div to already defined div in HTML on button click

Question

I want to append number of divs (based on user input) to already defined div in html, but the divs doesn't gets appended. The loop is working fine but isn't appending even a single div.

var split_button = document.querySelector(".btn");
split_button.addEventListener("click", myfunc);

function myfunc() {
  number = document.querySelector("#number").value;
  split = document.querySelector("#split").value;

  totalDivs = Math.floor(number / split);

  var displayDiv = document.getElementById("disp");

  for (var i = 0; i < totalDivs; i++) {
    let tag = document.createElement("div");
    displayDiv.appendChild(tag);
  }
}

<div class="container my-5">
  <form>
    <div class="form-group p-2">
      <label for="number" class="num">Enter a Number</label>
      <input type="number" class="form-control" id="number" />
    </div>
    <div class="form-group p-2">
      <label for="split" class="num">Enter number of times you want to split</label>
          <input type="number" class="form-control" id="split" />
        </div>
        <button type="submit" class="btn btn-primary my-2">Split</button>
      </form>
      <div id="disp"></div>
    </div>
  </form>
</div>

Answer 1

1. Be consistent: define all the constants first
2. Don't submit the form - you can use preventDefault to not do that
3. You need some content to see the div

const numField = document.getElementById("number");
const splitField = document.getElementById("split");
const displayDiv = document.getElementById("disp");
document.getElementById("formId").addEventListener("submit", e => {
  e.preventDefault(); // stop submission
  const num = +numField.value;
  const split = +splitField.value;
  if (split === 0) {
    alert("Cannot divide by zero");
    return;
  }
  const totalDivs = Math.floor(num / split);
  console.log(totalDivs);
  if (totalDivs < 1) {
    console.log("Nothing to append")
  }
  displayDiv.innerHTML = "";
  for (let i = 0; i < totalDivs; i++) {
    let div = document.createElement("div");
    div.innerText = i;
    displayDiv.appendChild(div);
  }
})

<div class="container my-5">
  <form id="formId">
    <div class="form-group p-2">
      <label for="number" class="num">Enter a Number</label>
      <input type="number" class="form-control" id="number" />
    </div>
    <div class="form-group p-2">
      <label for="split" class="num">Enter number of times you want to split</label>
      <input type="number" class="form-control" id="split" />
    </div>

    <button type="submit" class="btn btn-primary my-2">Split</button>
  </form>
  <div id="disp"></div>
</div>