Estoy tratando de cambiar 3 entradas de texto para seleccionar y agregar opciones debajo, pero la entrada sigue siendo la misma.
Aquí está mi código js
let inputSelect=['protons2', 'atomic2', 'neutrons']; for(let i = 0; i < inputSelect; i++){ document.getElementById(inputSelect[i]).setAttribute("type","select") const opt = document.createElement("option"); opt.textContent = "orbit"; document.getElementById(inputSelect[i]).appendChild(opt) }aquí está mi código html
<label id="pro2" for = "protons2"></label> <input type = "text" id = "protons2" class='input' autocomplete="off" placeholder="Answer"> <label id="at2" for = "atomic2"></label> <input type = "text" id = "atomic2" class='input' autocomplete="off" placeholder="Answer"> <label id="new" for = "neutrons"></label> <input type = "text" id = "neutrons" class='input' autocomplete="off" placeholder="Answer">El tipo de entrada cambia de acuerdo con la entrada del selector css [tipo = texto], ya que ninguno de los estilos de ese selector se aplica una vez que la entrada de texto cambia a una entrada de selección. Sin embargo, sigue siendo una entrada de texto.
1 - Tienes que usar el valor de longitud en la matriz para usarlo en el for.
2 - No puede convertir un texto de entrada en una selección. Tienes que reemplazar el elemento.
let inputSelect = ['protons2', 'atomic2', 'neutrons']; for (let i = 0; i < inputSelect.length; i++) { select_aux = document.createElement("select"); select_aux.id = inputSelect[i]; document.getElementById(inputSelect[i]).replaceWith(select_aux); const opt = document.createElement("option"); opt.textContent = "orbit"; document.getElementById(inputSelect[i]).appendChild(opt); } <input type="text" id="protons2"> <input type="text" id="atomic2"> <input type="text" id="neutrons">No hay un atributo de tipo que se seleccione, en su lugar, debe crear un elemento de selección.
Nota: Olvidó agregar .length a inputSelect en su bucle.
<select> <option>Option 1</option> </select>Crear una selección con JS
document.insertAdjacentHTML('beforeend', '<select> <option>Option 1</option> </select>') let inputSelect=['protons2', 'atomic2', 'neutrons']; for(let i = 0; i < inputSelect.length; i++){ const opt = document.createElement("option"); opt.textContent = "orbit"; document.getElementById(inputSelect[i]).appendChild(opt) } <select id="protons2"> </select> <select id="atomic2"> </select> <select id="neutrons"> </select>