how to display different input type based upon drop down values-CodePudding

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" >
  <!-- Modal content -->
  <div >
    <div >
      <h2>Add detail</h2>
    </div>
    <div >
      <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  style="text-align: center;"></div>
        <br>
        <input type="reset" />
      </form>
    </div>
  </div>
</div>
<div >
  <div >

  </div>
</div>

CodePudding user response：

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" >
  <!-- Modal content -->
  <div >
    <div >
      <h2>Add detail</h2>
    </div>
    <div >
      <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  style="text-align: center;"></div>
        <br>
        <input type="reset" />
      </form>
    </div>
  </div>
</div>
<div >
  <div >

  </div>
</div>