I need to display input type date and datetime based upon dropdown values ., I need to do like if I select first value need to show only input type date and if I select second value need to show input type as datetime. I tried but I unable it is working..,
Thanks in advance
function changeFunc() {
v var chkmale = document.getElementById("male");
var dvtext = document.getElementById("dvtext");
dvtext.style.display = chkmale.checked ? "block" : "none";
var chkfemale = document.getElementById("female");
var dvtext1 = document.getElementById("dvtext1");
dvtext1.style.display = chkfemale.checked ? "block" : "none";
}<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<h2>Add detail</h2>
</div>
<div class="modal-body">
<form>
<label for="gender">Gender: </label>
<select id="a" onchange="changeFunc();">
<option> Select</option>
<option id="male" name="gender" value="Male"> Male</option>
<option id="female" name="gender" value="Female">FeMale </option>
</select>
<br>
<br>
<div id="dvtext" style="display: none">
Enter your Height:
<input type="date">
</div>
<div id="dvtext1" style="display: none">
Enter your Weight:
<input type="date">
</div>
<div class="alert-msg" style="text-align: center;"></div>
<br>
<input type="reset" />
</form>
</div>
</div>
</div>
<div class="container">
<div class="col-lg-12">
</div>
</div>chkmale.selectedValue.checked does not make any sense and = is assignment, you want === to test equality
I suggest you use eventListener and simplify the script using proper variable and element names
The name of a select goes on the select too options do not have IDs or names
document.getElementById("genderSelect").addEventListener("change",function() {
const isMale = this.value === "Male"
document.getElementById("dvtext").hidden = !isMale
document.getElementById("dvtext1").hidden = !isMale
})<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<h2>Add detail</h2>
</div>
<div class="modal-body">
<form>
<label for="gender">Gender: </label>
<select id="genderSelect" name="gender">
<option> Select</option>
<option value="Male"> Male</option>
<option value="Female">FeMale </option>
</select>
<br>
<br>
<div id="dvtext" hidden>
Enter your Height:
<input type="date" id="height" name="height">
</div>
<div id="dvtext1" hidden>
Enter your Weight:
<input type="date" id="weight" name="weight">
</div>
<div class="alert-msg" style="text-align: center;"></div>
<br>
<input type="reset" />
</form>
</div>
</div>
</div>
<div class="container">
<div class="col-lg-12">
</div>
</div>