javascript creat div or section from the input form-CodePudding

I have a form that i enter the number of element then the text then the type div or section and i click create i should remove the older div or section and create the new one

/*get the number of element the text and the type*/
let element = document.querySelector("[name='elements']");
let text = document.querySelector("[name='texts']");
let type = document.querySelector("[name='type']");
let result = document.querySelector(".results");

document.forms[0].onsubmit = function (e) {
  let validElement = false;
  let validText = false;
  let validType = false;
  document.querySelectorAll(".results .box").forEach((box) => box.remove());

  if (element.value !== "" && text.value !== "" && type.value !== "" && element.value > 0) {
    
    for (let i = 0; i < element.value; i  ) {
      
      myBox = document.createElement(type.value);
      
      myBox.className = "box";
      myBox.id = `id-${i 1}`;
      myBox.title = "Element";
      
      myText = document.createTextNode(text.value);
      
      myBox.appendChild(myText);
      result.appendChild(myBox);
    }
    
    validElement = true;
    validText = true;
    validType = true;
  }

  if (validElement === false || validText === false || validType === false) {
    e.preventDefault();
  }
};

<form action="">
  <input type="number" name="elements" class="input" placeholder="Number Of Elements" />
  <input type="text" name="texts" class="input" placeholder="Elements Text" />
  <select name="type" class="input">
    <option value="Div">Div</option>
    <option value="Section">Section</option>
  </select>
  <input type="submit" name="create" value="Create" />
</form>
  <div class="results"></div>

The problem is that the div or section appear but than disappear quickly i'm checking if the field are empty and if the field element number > 0 than i create the element that should appear in the result div

how can i solve this problem

CodePudding user response：

The problem with your code is that you aren't preventing the <form> from refreshing the page.

  if (validElement === false || validText === false || validType === false) {
    e.preventDefault();
  }

You use the above if statement to prevent the <form>'s default behaviour, but you set all those variables to true after creating your elements.

    validElement = true;
    validText = true;
    validType = true;

So your script basically creates the elements and then the form refreshes the page.

Moving e.preventDefault(); outside of its if block would fix your immediate problem.

I would personally call e.preventDefault(); regardless of whether the users put in valid data, as a page refresh seems unneccesary in either case.

As for how to clear your results div, here is an elaborate post describing several ways of doing it.

/*get the number of element the text and the type*/
let element = document.querySelector("[name='elements']");
let text = document.querySelector("[name='texts']");
let type = document.querySelector("[name='type']");
let result = document.querySelector(".results");

document.forms[0].onsubmit = function (e) {
  let validElement = false;
  let validText = false;
  let validType = false;
  document.querySelectorAll(".results .box").forEach((box) => box.remove());

  if (element.value !== "" && text.value !== "" && type.value !== "" && element.value > 0) {
    // Clear the Results Container
    while (result.firstChild) {
        result.removeChild(result.lastChild);
    }
    // Repopulate the Results Container
    for (let i = 0; i < element.value; i  ) {
      
      myBox = document.createElement(type.value);
      
      myBox.className = "box";
      myBox.id = `id-${i 1}`;
      myBox.title = "Element";
      
      myText = document.createTextNode(text.value);
      
      myBox.appendChild(myText);
      result.appendChild(myBox);
    }
    
    validElement = true;
    validText = true;
    validType = true;
  }
  e.preventDefault();
};

<form action="">
  <input type="number" name="elements" class="input" placeholder="Number Of Elements" />
  <input type="text" name="texts" class="input" placeholder="Elements Text" />
  <select name="type" class="input">
    <option value="Div">Div</option>
    <option value="Section">Section</option>
  </select>
  <input type="submit" name="create" value="Create" />
</form>
  <div class="results"></div>