Activate blocks according to user selected number in Html

I have to make a simple web page where a user selects number of friends and according to the input , invisible boxes are triggered , like if user selected 3 , 3 boxes will appear where user enters the friends name. I have made the Html code , but only 1 box is appearing everytime. I'm pretty new in Html , any help will be appreciated.

function CheckColors(val) {
  var element = document.getElementById('color');
  if (val == 'pick a color' || val == '1')
    element.style.display = 'block';

  elif(val == 'pick a color' || val == '2')
  element.style.display = 'block';
  element.style.display = 'block';

  elif(val == 'pick a color' || val == '3')
  element.style.display = 'block';
  element.style.display = 'block';
  element.style.display = 'block';

  elif(val == 'pick a color' || val == '4')
  element.style.display = 'block';
  element.style.display = 'block';
  element.style.display = 'block';
  element.style.display = 'block';

  elif(val == 'pick a color' || val == '5')
  element.style.display = 'block';
  element.style.display = 'block';
  element.style.display = 'block';
  element.style.display = 'block';
  element.style.display = 'block';
}
<select name="color" onchange='CheckColors(this.value);'>
  <option>How Many Friends Do You Have?</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>
<input type="text" name="color" id="color" style='display:none;' />

3 answers

  • answered 2022-01-25 14:16 Imperyum

    First, you have only 1 input element to show in your HTML code. After that, you need to change your elif for else if in the if statement.

    var select = document.getElementById("select");
      select.addEventListener("change", function() {
        var val = select.value;
        var element = document.getElementsByClassName('color');
        if (val == 'pick a color' || val == '1') {
          element[0].style.display = 'block';
    
        } else if (val == 'pick a color' || val == '2') {
          element[0].style.display = 'block';
          element[1].style.display = 'block';
    
        } else if (val == 'pick a color' || val == '3') {
          element[0].style.display = 'block';
          element[1].style.display = 'block';
          element[2].style.display = 'block';
    
        } else if (val == 'pick a color' || val == '4') {
          element[0].style.display = 'block';
          element[1].style.display = 'block';
          element[2].style.display = 'block';
          element[3].style.display = 'block';
    
        } else{ 
          element[0].style.display = 'block';
          element[1].style.display = 'block';
          element[2].style.display = 'block';
          element[3].style.display = 'block';
          element[4].style.display = 'block';
        }});
    <select id="select" name="color">
      <option>How Many Friends Do You Have?</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
    </select>
    <input type="text" name="color" class="color" style='display:none;' />
    <input type="text" name="color1" class="color" style='display:none;' />
    <input type="text" name="color2" class="color" style='display:none;' />
    <input type="text" name="color3" class="color" style='display:none;' />
    <input type="text" name="color4" class="color" style='display:none;' />

  • answered 2022-01-25 14:24 traynor

    create a box container, and then create given number of boxes dynamically:

    function createBox() {
    
      const box = document.createElement("input");
      box.type = "text";
      box.className = "box";
      return box;
    }
    
    function CheckColors(val) {
    
      var element = document.querySelector('.box-container');
    
      element.innerHTML = '';
    
      console.log(val)
    
      for (let i = 0; i < val; i++) {
        element.appendChild(createBox());
      }
    
    }
    .box-container {
      padding: 1rem;
    }
    
    .box-container .box {
      padding: .5rem;
      border: 1px solid lightblue;
      margin-right: .3rem;
    }
    <select name="color" onchange='CheckColors(this.value);'>
      <option>How Many Friends Do You Have?</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
    </select>
    <div class="box-container"></div>

  • answered 2022-01-25 14:33 Maniraj Murugan

    Lets try to achieve the things dynamically instead making multiple if...else blocks.

    -> Create a new div called input-block

    -> Then make for loop as per the value selected from select box.

    -> Create new input element.

    -> Append every new input elements inside the input block.

    Assign each input box a unique id like input.id = friend-${i+1}; to get the reference unique.

    function CheckColors(val){
     const element = document.getElementById('color');
     const inputBlock = document.getElementById('input-block');
     inputBlock.innerHTML = '';
    
      for(let i = 0; i < val; i++){
        const input = document.createElement('input');
        input.id = `friend-${i+1}`;
        input.placeholder = `Friend ${i+1}`;
        inputBlock.append(input)
      } 
    
    }
    #input-block input {
      padding: 5px;
      margin: 5px;
    }
      <select name="color" onchange='CheckColors(this.value);'> 
        <option>How Many Friends Do You Have?</option>  
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
      </select>
    
      <br /> <br />
    
      <div id="input-block"> </div>

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum