I have setup a webpage with two input fields (type number) and a button.
The button has an onClick event setup which is a function that picks values from the input fields and creates a label inside the same fieldset to declare that a Player (input value) has entered round (input value).
That’s all it does.
But I am amazed when I click the button. I see that the label declaring the announcement appears without any problem, but at the same time, the numbers contained in the input fields vanish immediately. I suspect that the page is refreshing. But then again, the button setup with onClick event is not a ‘Submit’ type of button. It’s just a button.
What is happening here? I want to create that announcement label at the click of the button but keep all the numbers entered in the previous input fields.
Interestingly, if you take the button out of the fieldset and use a new fieldset below it to append the label, then the data entered in the previous input fields does not vanish!!.
I know about event bubbling. But in my code the onClick event is the only event setup to fire and no other. Please let me know what is happening here. My code is as shown below –
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vanila JavaScript</title>
</head>
<body>
<h1>Welcome to Dynamic Forms</h1>
<h2>(for practicing JavaScript)</h2>
<hr />
<p>Your practice begins now...</p>
<form id="frm1" action="" method="">
<fieldset id="fldset_1">
<legend>Fieldset One</legend>
<label style="width: 200px; background-color: teal; color: white;">Enter Player Number:</label>
<input id="noOfPlayers" type="number" style="width: 50px;">
<br>
<label style="width: 200px; background-color: teal; color: white;">Enter Round Number:</label>
<input id="noOfRounds" type="number" style="width: 50px;">
<br>
<button type="button" style="width:150px; height: 50px; background-color: black; color: yellow;" onclick="createNxtRound()">Create Next Round</button>
<br>
</fieldset>
<fieldset id="fldset_2">
<legend>Fieldset Two</legend>
</fieldset>
</form>
<script>
function createNxtRound()
{
const fieldset = document.getElementById("fldset_1");
const lbl = document.createElement("label");
lbl.setAttribute("style", "width:100%; background-color:yellow; color:black; font-weight:bold");
lbl.innerHTML = "Player " + document.getElementById("noOfPlayers").value + " has entered round " + document.getElementById("noOfRounds").value
fieldset.appendChild(lbl);
fieldset.innerHTML += "<br />";
}
</script>
</body>
</html>