根据 Html 中用户选择的编号激活块

Question

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;' />

Answer 1

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>

Answer 2

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;' />

Answer 3

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>