CODEWITHSUNDEEP
javascripthtml-table
Dil Marc
Dil Marc

Reputation: 103

Hidden div appear on table option select

I have a page with a form and questions of these forms are asked on two separate tables. I want to make the second table appear only if One, Two or Three is selected from the first table, and be invisible by default. If Zero is selected again, table 2 disappears again.

I got it to partially work with the code below, however I think my script is cancelling each other out. I can get it to work with One, Two or Three, but not all three selections. In this case, table 2 only appears when I select "Three", and nothing happens when Zero, One and Two is selected.

How would I go about changing the script to let it appear when One, Two or Three are selected and disappear when Zero is selected once again. 

<table>
  <tr>
    <td>Numbers</td>
    <td>
      <select id="numbers" name="numbers">
         <option value="Zero" selected>0</option>
         <option value="One">1</option>
         <option value="Two">2</option>
         <option value="Three">3</option>
       </select>
    </td>
  </tr>
</table>

<span id="animals" style="display: none;"> 
  <table>
       <tr>
           <td>Animal</td>
           <td>
              <select id="animal" input name="animal">
                  <option value="Dog">Dog</option>
                  <option value="Cat">Cat</option>
                  <option value="Rabbit">Rabbit</option>
              </select>
         </td>
      </tr>
  </table>
</span>

<script>
document.getElementById('numbers').addEventListener('change', function () {
    var style = this.value == 'One' ? 'inline' : 'none';
    document.getElementById('animals').style.display = style;
});
document.getElementById('numbers').addEventListener('change', function () {
    var style = this.value == 'Two' ? 'inline' : 'none';
    document.getElementById('animals').style.display = style;
});
document.getElementById('numbers').addEventListener('change', function () {
    var style = this.value == 'Three' ? 'inline' : 'none';
    document.getElementById('animals').style.display = style;
});
</script>

Upvotes: 2

Views: 157

Answers (2)

Shiv Kumar Baghel
Shiv Kumar Baghel

Reputation: 2480

using Array include, check code snippet.

<html>
<body>
<table>
  <tr>
    <td>Numbers</td>
    <td>
      <select id="numbers" name="numbers">
         <option value="Zero" selected>0</option>
         <option value="One">1</option>
         <option value="Two">2</option>
         <option value="Three">3</option>
       </select>
    </td>
  </tr>
</table>

<span id="animals" style="display: none;"> 
  <table>
       <tr>
           <td>Animal</td>
           <td>
              <select id="animal" input name="animal">
                  <option value="Dog">Dog</option>
                  <option value="Cat">Cat</option>
                  <option value="Rabbit">Rabbit</option>
              </select>
         </td>
      </tr>
  </table>
</span>
<script>

function checkVals(val){
  if(!val) {
    val = document.getElementById('numbers').value;
  }
 
var allowed = ["One", "Two", "Three"];
var check = allowed.includes(val);

if(check){
   document.getElementById('animals').style.display = 'block';
}else{
   document.getElementById('animals').style.display = 'none';
}

}

document.getElementById('numbers').addEventListener('change', function () {
var val = this.value;
checkVals(val);

});


window.onload="checkVals()";


</script>
</body>
</html>

Upvotes: 1

shubham jain
shubham jain

Reputation: 84

You do not need to write three event listeners. Just one can do this.

 document.getElementById('numbers').addEventListener('change', function () {
var style = (this.value == 'One' || this.value == 'Two' || this.value =='Three')  && (this.value != 'Zero') ? 'inline' : 'none';
document.getElementById('animals').style.display = style;
 });

Upvotes: 1

Related Questions