Tengo que hacer una página web simple donde un usuario selecciona la cantidad de amigos y, de acuerdo con la entrada, se activan cuadros invisibles, como si el usuario seleccionara 3, aparecerán 3 cuadros donde el usuario ingresa el nombre de los amigos. He creado el código Html, pero solo aparece 1 cuadro cada vez. Soy bastante nuevo en Html, cualquier ayuda será apreciada.
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;' />cree un contenedor de cajas y luego cree un número determinado de cajas de forma dinámica:
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>Primero, solo tiene 1 elemento de entrada para mostrar en su HTML code . Después de eso, debe cambiar su elif por else if en la 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;' />Intentemos lograr las cosas dinámicamente en lugar de hacer múltiples bloques if...else .
-> Crear un nuevo div llamado input-block
-> Luego haga un bucle for según el valor seleccionado en el cuadro de selección.
-> Crear nuevo elemento de entrada.
-> Agregue cada nuevo elemento de entrada dentro del bloque de entrada.
Asigne a cada cuadro de entrada una identificación única como input.id = friend-${i+1}; para obtener la referencia única.
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>