How to show-hide div element in JavaScript as per select element value?-CodePudding

Here are options (option 0, option 1 and option 2). If option 1 is selected, the videoShowHide should be shown, and hide the onlineShowHide and handoutShowHide.

HTML:

document.getElementById('type').onchange(function() {
  if (document.getElementById('type').value === 0) {
    document.getElementById('onlineShowHide').classList.add('d-block');
    document.getElementById('handoutShowHide').classList.add('d-none');
    document.getElementById('videoShowHide').classList.add('d-none');
  }
  if (document.getElementById('type').value === 1) {
    document.getElementById('onlineShowHide').classList.add('d-none');
    document.getElementById('handoutShowHide').classList.add('d-block');
    document.getElementById('videoShowHide').classList.add('d-none');
  }
  if (document.getElementById('type').value === 2) {
    document.getElementById('onlineShowHide').classList.add('d-none');
    document.getElementById('handoutShowHide').classList.add('d-none');
    document.getElementById('videoShowHide').classList.add('d-block');
  }
})

<div >
  <label for="type" >نوع</label>
  <select  id="type" name="type">
    <option value="0">Online</option>
    <option value="1">Video</option>
    <option value="2">Handout</option>
  </select>
</div>
<div  id="onlineShowHide">
  <label for="online" >Online</label>
  <input type="text"  id="online" name="online">
</div>
<div  id="videoShowHide">
  <label for="video" >Video</label>
  <input type="file"  id="video" name="video">
</div>
<div  id="handoutShowHide">
  <label for="handout" >Handout</label>
  <input type="file"  id="handout" name="handout">
</div>

CodePudding user response：

To add an event you can do it using addEventListener or assign a function to this event like this: document.getElementById('type').onchange = function() {}.
When you retrieve the value from the #type element it will be a string and not a number.
You are trying to add d-block to the element to show it but you are not removing the already existing d-none class so you should rather remove the d-none class to show the element.

Example:

let onlineShowHide = document.getElementById('onlineShowHide');
let handoutShowHide = document.getElementById('handoutShowHide');
let videoShowHide = document.getElementById('videoShowHide');

let type = document.getElementById('type');

type.onchange = function () {
      onlineShowHide.classList.add('d-none');
      videoShowHide.classList.add('d-none');
      handoutShowHide.classList.add('d-none');
        
    if(type.value === '0') {
        onlineShowHide.classList.remove('d-none');
    }
    if(type.value === '1') {
        videoShowHide.classList.remove('d-none');
    }
    if(type.value === '2') {
        handoutShowHide.classList.remove('d-none');
    }
}

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div >
    <label for="type" >نوع</label>
    <select  id="type" name="type">
        <option value="0">Online</option>
        <option value="1">Video</option>
        <option value="2">Handout</option>
    </select>
</div>
<div  id="onlineShowHide">
    <label for="online" >Online</label>
    <input type="text"  id="online" name="online">
</div>
<div  id="videoShowHide">
    <label for="video" >Video</label>
    <input type="file"  id="video" name="video">
</div>
<div  id="handoutShowHide">
    <label for="handout" >Handout</label>
    <input type="file"  id="handout" name="handout">
</div>