Adding elements dynamically

Question

I'm trying to add elements dynamically through javascript but whenever I try opening up the page they appear for a split second then disappear I take a number of process from the input tag and run a loop to create each element individually I tried removing everything from the event and only call a function which I placed the code in but didn't work

const numberOfProcesses = document.getElementById("numberOfProcesses").value;
const timeQuantum = document.getElementById("timeQuantum").value;
const start = document.getElementById("start");
const processDiv = document.getElementById("processDiv");
const burstDiv = document.getElementById("burstDiv");

start.addEventListener("click", (event) => {
  for (let i = 0; i < numberOfProcesses; i++) {
    let pLabel = document.createElement("label");

    pLabel.setAttribute("id", `process ${i}`);
    pLabel.innerText = `Process ${i}`;

    let pInput = document.createElement("input");

    pInput.setAttribute("type", "number");
    pInput.setAttribute("id", `process ${i}`);

    let bLabel = document.createElement("label");

    

    bLabel.setAttribute("id", `burstTime ${i}`);
    bLabel.innerText = `Burst Time ${i}`;

    let bInput = document.createElement("input");

    bInput.setAttribute("type", "number");
    bInput.setAttribute("id", `burstTime ${i}`);

    processDiv.appendChild(pLabel);
    processDiv.appendChild(pInput);

    burstDiv.appendChild(bLabel);
    burstDiv.appendChild(bInput);

    console.log(pLabel, pInput, bLabel, bInput);
  }
});

<form action="">
  <div>
    <label for="numberOfProcesses">Enter Number Of Processes</label>
    <input type="number" name="Number Of Processes" id="numberOfProcesses" value="5" />
  </div>
  <br />
  <div>
    <label for="timeQuantum">Enter Time Quantum</label>
    <input type="number" name="time quantum" value="5" id="timeQuantum" />
  </div>
  <button id="start">Start</button>
</form>
</section>

<br /><br />

<section>
  <form action="">
    <div id="processDiv">
      <label for="process0">P0</label>
      <input type="number" name="process" id="process0" />
    </div>

    <div id="burstDiv">
      <label for="burstTime0">Burst Time</label>
      <input type="number" name="burst time" id="burstTime0" />
    </div>
    <button id="excute">Execute</button>
  </form>

egx · Accepted Answer · 2021-06-01 18:24:46Z

1

Remove action="" and set type attribute to button if nothing is submitted. The behaviour you describe is due to the form being submitted.

Do like this and you can see you console log for other errors:

<form>
 <div>
<label for="numberOfProcesses">Enter Number Of Processes</label>
<input type="number" name="Number Of Processes" id="numberOfProcesses" value="5" />
</div>
<br />
 <div>
 <label for="timeQuantum">Enter Time Quantum</label>
 <input type="number" name="time quantum" value="5" id="timeQuantum" />
 </div>
 <button type="button" id="start">Start</button>
</form>

answered Jun 1, 2021 at 18:24

egx

4115 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Trunk Over a year ago

Good spot, egx. Apparently different browsers have different button types. One or two typos in the original JS code, now corrected.

Collectives™ on Stack Overflow

Adding elements dynamically

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related