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