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>