Hey there! I'm a student currently diving into the world of JavaScript, CSS, and HTML. However, I've encountered a little problem while working on an exercise that involves using Bootstrap.
function ShowForm(formId){
document.getElementById("form1").style.display = "none";
document.getElementById("form2").style.display = "none";
document.getElementById(formId).style.display = "block";
}<!doctype html>
<html lang="en">
<head>
<title>Registration Form</title>
</head>
<body>
<div class="container">
<h1>Registration Form</h1>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" value=1 onclick="ShowForm('form1');" >
<label class="form-check-label" for="inlineRadio1">Individual</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" onclick="ShowForm('form2'); " value=2>
<label class="form-check-label" for="inlineRadio2">Company</label>
</div>
<form id="form1" class="row g-3" value=1>
<div class="col-md-6">
<label for="inputEmail4" class="form-label">Email</label>
<input type="email" class="form-control" id="inputEmail4">
</div>
<div class="col-md-6">
<label for="inputPassword4" class="form-label">Password</label>
<input type="password" class="form-control" id="inputPassword4">
</div>
</form>
<form id="form2" type="hidden" class="row g-3" style="display:none;" value=2>
<div class="col-md-6">
<label for="inputEmail4" class="form-label">SomeLabel</label>
<input type="email" class="form-control" id="inputEmail4">
</div>
</form>
</div>
</body>
</html>Can anyone help me understand why clicking the radio button changes the form layout? Thanks a bunch!