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>

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

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