hice dos listas desplegables por medio de arreglos en html y javascript, la idea que se me ocurrio es que cuando cuando se seleccionen ambos espacios me arroje una palabra en un elemento, sin necesidad de usar un boton, pero al momento de ejecutar el programa, las listas no se despliegan, no logro entender por qué. Trabajo con visual studio code y no me presenta ninguna serie de error en el código, tampoco la consola del navegador me muestra error ¿me pueden ayudar? ¡es urgente! soy nueva en esto de la programación, gracias.
Este es mi código HTML:
<body class="opcionUno">
<!--Información página op1-->
<div class="opUno">
<p>¿Qué signo soy?</p>
<div class="select">
<select name="dia" id="selectDia">
<option value="">Día</option>
</select>
<select name="mes" id="selectMes">
<option value="">Mes</option>
</select>
</div>
<div class="resultado">
<div class="calculaSigno"></div>
</div>
</div>
</div>
<script src="js/opcion1.js"></script>
</body>
y este es mi código en js:
let seleccionar = document.querySelector('select'); //Función que llama al selector
seleccionar.addEventListener('change', calculaSigno); //Función que permite almacenar el signo calculado
//Arreglo que carga los días
function cargarDias(){
let dia=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31];
for (var i in dia){
document.getElementById('selectDia').innerHTML += "<option value=='"+dia[i]+"'>"+dia[i]+"
</option>";
}
}
function cargarMeses(){ //Arreglo que carga los meses
let mes=['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'];
for (var i in mes){
document.getElementById('selectMes').innerHTML += "<option value=='"+mes[i]+"'>"+mes[i]+"</option>";
}
}
function calculaSigno(){ //Función que selecciona los elementos a comparar
let dia=document.getElementById('selectDia').value;
let mes=document.getElementById('selectMes').value;
if((dia>=21&&mes=="Marzo")||(dia<=20&&mes=="Abril")){
document.getElementById("calculaSigno").innerHTML = "Aries";
}else if((dia>=24&&mes=="Septiembre")||(dia<=23&&mes=="Octubre")){
document.getElementById("calculaSigno").innerHTML = "Libra";
}else if((dia>=21&&mes=="Abril")||(dia<=21&&mes=="Mayo")){
document.getElementById("calculaSigno").innerHTML = "Tauro";
}else if((dia>=24&&mes=="Octubre")||(dia<=22&&mes=="Noviembre")){
document.getElementById("calculaSigno").innerHTML = "Escorpio";
}else if((dia>=22&&mes=="Mayo")||(dia<=21&&mes=="Junio")){
document.getElementById("calculaSigno").innerHTML = "Géminis";
}else if((dia>=23&&mes=="Noviembre")||(dia<=21&&mes=="Diciembre")){
document.getElementById("calculaSigno").innerHTML = "Sagitario";
}else if((dia>=21&&mes=="Junio")||(dia<=23&&mes=="Julio")){
document.getElementById("calculaSigno").innerHTML = "Cáncer";
}else if((dia>=22&&mes=="Diciembre")||(dia<=20&&mes=="Enero")){
document.getElementById("calculaSigno").innerHTML = "Capricornio";
}else if((dia>=24&&mes=="Julio")||(dia<=23&&mes=="Agosto")){
document.getElementById("calculaSigno").innerHTML = "Leo";
}else if((dia>=21&&mes=="Enero")||(dia<=19&&mes=="Febrero")){
document.getElementById("calculaSigno").innerHTML = "Acuario";
}else if((dia>=24&&mes=="Agosto")||(dia<=23&&mes=="Septiembre")){
document.getElementById("calculaSigno").innerHTML = "Virgo";
}else if ((dia>=20&&mes==2)||(dia<=20&&mes==3)){
document.getElementById("calculaSigno").innerHTML = "Piscis";
}
else{
document.getElementById("calculaSigno").innerHTML = "";
}
}
cargarDias()
y acargarMeses()
para que los elementos se rellenen ¿? Luego, tienes un error aquí:document.getElementById('selectDia').innerHTML += "<option value=='"+dia[i]+"'>"+dia[i]+" </option>";
hay un salto de línea que está fastidiando el contenido.