how to display different input type based upon drop down values

Question

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>

Answer 1

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>