0

estoy haciendo una especie de calculadora que me suma valores por cada bloque y al final me hace la suma del total que me quede por cada bloque.

Mi duda es que me sale un valor NAN, en la suma del primer bloque y el segundo bloque, y dicho valor desaparece solo cuando completo el total de los select de la lista, hasta donde he leido esto se debe a que mientras no selecciono un campo se toma como NULL, pero no se como remplazar ese valor con un cero para evitar eso.

Como lo mencione líneas mas arriba, son tres resultados, la suma del primer bloque, la suma del segundo bloque y al final me hace una suma de esos dos bloques, pero me da error NAN, por ejemplo me sale NAN en la suma del primer bloque hasta que no completó los tres campos de ese bloque, naturalmente pasa lo mismo con el segundo bloque y la suma general supera el NAN cuando se completan los 6 campos de ambos bloques, espero haberme hecho entender.

function myFunction() {
  //Bloque1
  c1 = document.getElementById("mySelect").value;
  c2 = document.getElementById("mySelect2").value;
  c3 = document.getElementById("mySelect3").value;
  
  //Bloque2
  c4 = document.getElementById("mySelect4").value;
  c5 = document.getElementById("mySelect5").value;
  c6 = document.getElementById("mySelect6").value;
  
  
  //Operacion del bloque1
  sb1 = parseFloat(c1)+parseFloat(c2)+parseFloat(c3);
  //Operacion del bloque2
  sb2 = parseFloat(c4)+parseFloat(c5)+parseFloat(c6);
  
  //Muestra resultados por bloque
  document.getElementById("demo").innerHTML = "Suma bloque 1: " + parseFloat(sb1);//Bloque1
  document.getElementById("demo2").innerHTML = "Suma bloque 2: " + parseFloat(sb2);//Bloque2
  
  
  //Suma los bloques
  st = parseFloat(sb1)+parseFloat(sb2);
  
  //Muestra total de puntaje Obtenido
  document.getElementById("tot").innerHTML = "TOTAL OBTENIDO: " + parseFloat(st);
}
<label>1.1</label>
 <div class="form-group">
    <label for="exampleFormControlSelect1">Example select</label>
    <select class="form-control" id="mySelect" onchange="myFunction()">
   <option value=""></option>
   <option value="2" >A</option>
  <option value="1" >AR</option>
  <option value="0" >I</option>
  
    </select>
  </div>
 
<label>1.2</label>
 <div class="form-group">
    <label for="exampleFormControlSelect1">Example select</label>
    <select class="form-control" id="mySelect2" onchange="myFunction()">
   <option value=""></option>
   <option value="2" >A</option>
  <option value="1" >AR</option>
  <option value="0" >I</option>
  
    </select>
  </div> 
  
 <label>1.3</label>
 <div class="form-group">
    <label for="exampleFormControlSelect1">Example select</label>
    <select class="form-control" id="mySelect3" onchange="myFunction()">
   <option value=""></option>
   <option value="2" >A</option>
  <option value="1" >AR</option>
  <option value="0" >I</option>
  
    </select>
  </div>
<div id="demo"></div>

</br></br>
<p>SUMA DEL BLOQUE 2</p>
</br>

<label>1.1</label>
 <div class="form-group">
    <label for="exampleFormControlSelect1">Example select</label>
    <select class="form-control" id="mySelect4" onchange="myFunction()">
   <option value=""></option>
   <option value="2" >A</option>
  <option value="1" >AR</option>
  <option value="0" >I</option>
  
    </select>
  </div>
 
<label>1.2</label>
 <div class="form-group">
    <label for="exampleFormControlSelect1">Example select</label>
    <select class="form-control" id="mySelect5" onchange="myFunction()">
   <option value=""></option>
   <option value="2" >A</option>
  <option value="1" >AR</option>
  <option value="0" >I</option>
  
    </select>
  </div> 
  
 <label>1.3</label>
 <div class="form-group">
    <label for="exampleFormControlSelect1">Example select</label>
    <select class="form-control" id="mySelect6" onchange="myFunction()">
   <option value=""></option>
   <option value="2" >A</option>
  <option value="1" >AR</option>
  <option value="0" >I</option>
  
    </select>
  </div> 
  
  <div id="demo2"></div>
  


<h4 id="tot"></h4>

1 respuesta 1

1

El problema de resultado NaN es por que al ejecutarse por primera vez el evento onchange el valor de las demás option es "", esto no es un numero y por eso el error. Una solución es agregar un condicional para dar un valor de 0 en caso de que el valor de las variables se a "". Aquí un ejemplo.

function myFunction() {
  //Bloque1
  c1 = document.getElementById("mySelect").value;
  c2 = document.getElementById("mySelect2").value;
  c3 = document.getElementById("mySelect3").value;
  
  //Bloque2
  c4 = document.getElementById("mySelect4").value;
  c5 = document.getElementById("mySelect5").value;
  c6 = document.getElementById("mySelect6").value;
  
  //Condicionales para dar un valor 0 en caso de que el valor de option sea ""
  if(c1 == "" ){ c1= 0};
  if(c2 == "" ){ c2= 0};
  if(c3 == "" ){ c3= 0};
  
  if(c4 == "" ){ c4= 0};
  if(c5 == "" ){ c5= 0};
  if(c6 == "" ){ c6= 0};
  
  //Operacion del bloque1
  sb1 = parseFloat(c1)+parseFloat(c2)+parseFloat(c3);
  //Operacion del bloque2
  sb2 = parseFloat(c4)+parseFloat(c5)+parseFloat(c6);
  
  //Muestra resultados por bloque
  document.getElementById("demo").innerHTML = "Suma bloque 1: " + parseFloat(sb1);//Bloque1
  document.getElementById("demo2").innerHTML = "Suma bloque 2: " + parseFloat(sb2);//Bloque2
  
  
  //Suma los bloques
  st = parseFloat(sb1)+parseFloat(sb2);
  
  //Muestra total de puntaje Obtenido
  document.getElementById("tot").innerHTML = "TOTAL OBTENIDO: " + parseFloat(st);
}
<label>1.1</label>
 <div class="form-group">
    <label for="exampleFormControlSelect1">Example select</label>
    <select class="form-control" id="mySelect" onchange="myFunction()">
   <option value=""></option>
   <option value="2" >A</option>
  <option value="1" >AR</option>
  <option value="0" >I</option>
  
    </select>
  </div>
 
<label>1.2</label>
 <div class="form-group">
    <label for="exampleFormControlSelect1">Example select</label>
    <select class="form-control" id="mySelect2" onchange="myFunction()">
   <option value=""></option>
   <option value="2" >A</option>
  <option value="1" >AR</option>
  <option value="0" >I</option>
  
    </select>
  </div> 
  
 <label>1.3</label>
 <div class="form-group">
    <label for="exampleFormControlSelect1">Example select</label>
    <select class="form-control" id="mySelect3" onchange="myFunction()">
   <option value=""></option>
   <option value="2" >A</option>
  <option value="1" >AR</option>
  <option value="0" >I</option>
  
    </select>
  </div>
<div id="demo"></div>

</br></br>
<p>SUMA DEL BLOQUE 2</p>
</br>

<label>1.1</label>
 <div class="form-group">
    <label for="exampleFormControlSelect1">Example select</label>
    <select class="form-control" id="mySelect4" onchange="myFunction()">
   <option value=""></option>
   <option value="2" >A</option>
  <option value="1" >AR</option>
  <option value="0" >I</option>
  
    </select>
  </div>
 
<label>1.2</label>
 <div class="form-group">
    <label for="exampleFormControlSelect1">Example select</label>
    <select class="form-control" id="mySelect5" onchange="myFunction()">
   <option value=""></option>
   <option value="2" >A</option>
  <option value="1" >AR</option>
  <option value="0" >I</option>
  
    </select>
  </div> 
  
 <label>1.3</label>
 <div class="form-group">
    <label for="exampleFormControlSelect1">Example select</label>
    <select class="form-control" id="mySelect6" onchange="myFunction()">
   <option value=""></option>
   <option value="2" >A</option>
  <option value="1" >AR</option>
  <option value="0" >I</option>
  
    </select>
  </div> 
  
  <div id="demo2"></div>
  


<h4 id="tot"></h4>

1
  • Perfecto, entiendo lo que respondes y agradezco tu ayuda. ya se como cambiar esos valores a 0, cuando me den valores NaN, gracias Commented el 14 oct. 2021 a las 0:31

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.