0

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 = "";
    }
}


  
1
  • Este código se puede simplificar bastante, evitando tantos ifs y demás. Pero lo principal ahora es que expliques dónde llamas a cargarDias() y a cargarMeses() 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.
    – A. Cedano
    Commented el 17 may. 2021 a las 9:41

1 respuesta 1

0

Como dice A.Cedano hay un salto de linea que está fastidiando. También he visto errores a la hora de pintar el value, es un único = -> <option value="Valor"></option>

y errores en la función de cálculo, no encuentra el div porque lo has declarado como clase pero lo tienes que declarar como id.

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];
    
    dia.forEach( i =>
      document.getElementById('selectDia').innerHTML += "<option value='"+dia[i -1]+"'>"+dia[i-1]+"</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 
    //Selecciono la opcion
    let diaA=document.getElementById('selectDia');
        let diaC = diaA.options[diaA.selectedIndex].value;
    let mesA=document.getElementById('selectMes');
    let mesC = mesA.options[mesA.selectedIndex].value;

    if((diaC>=21&&mesC=="Marzo")||(diaC<=20&&mesC=="Abril")){
      document.getElementById("calculaSigno").innerHTML = "Aries";
    }else if((diaC>=24&&mesC=="Septiembre")||(diaC<=23&&mesC=="Octubre")){
      document.getElementById("calculaSigno").innerHTML = "Libra";
    }else if((diaC>=21&&mesC=="Abril")||(diaC<=21&&mesC=="Mayo")){
      document.getElementById("calculaSigno").innerHTML = "Tauro";
    }else if((diaC>=24&&mesC=="Octubre")||(diaC<=22&&mesC=="Noviembre")){
      document.getElementById("calculaSigno").innerHTML = "Escorpio";
    }else if((diaC>=22&&mesC=="Mayo")||(diaC<=21&&mesC=="Junio")){
      document.getElementById("calculaSigno").innerHTML = "Géminis";
    }else if((diaC>=23&&mesC=="Noviembre")||(diaC<=21&&mesC=="Diciembre")){
      document.getElementById("calculaSigno").innerHTML = "Sagitario";
    }else if((diaC>=21&&mesC=="Junio")||(diaC<=23&&mesC=="Julio")){
      document.getElementById("calculaSigno").innerHTML = "Cáncer";
    }else if((diaC>=22&&mesC=="Diciembre")||(diaC<=20&&mesC=="Enero")){
      document.getElementById("calculaSigno").innerHTML = "Capricornio";
    }else if((diaC>=24&&mesC=="Julio")||(diaC<=23&&mesC=="Agosto")){
      document.getElementById("calculaSigno").innerHTML = "Leo";
    }else if((diaC>=21&&mesC=="Enero")||(diaC<=19&&mesC=="Febrero")){
      document.getElementById("calculaSigno").innerHTML = "Acuario";
    }else if((diaC>=24&&mesC=="Agosto")||(diaC<=23&&mesC=="Septiembre")){
      document.getElementById("calculaSigno").innerHTML = "Virgo";
    }else if ((diaC>=20&&mesC==2)||(diaC<=20&&mesC==3)){
      document.getElementById("calculaSigno").innerHTML = "Piscis";
    }
    else{
        document.getElementById("calculaSigno").innerHTML = "";
    }
}

cargarDias();
cargarMeses();
<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">
    <!--Cambio por id para poder encontrarlo-->
    <div id="calculaSigno"></div>                     
  </div>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.