[SOLUCIONADO] No me aparece el calculo correctamente

unexes · #1 (**permalink**) 13/04/2017, 16:57

Hola.
Vereis tengo un problema no consigo que el imput "Coste_Bruto" me muestre el calculo correctamente.
De entrada me debería mostrar un valor de "300" ya que el select "impresión" esta seleccionado de entrada en 2 caras y me muestra "0"
Cuando cambio el select y selecciono 1 Cara debería mostrarme "150" el valor de la impresión es de 10 x 15 = 150 y me muestra 300 y cuando selecciono 2 Caras el valor de la impresión es de 20 x 15 = 300 y me muestra 150.
¿Que es lo que estoy haciendo mal?
Os agradecería vuestra ayuda, este es el código que tengo, simplificado.

Código:

<!doctype html>
<html>
<head>
		<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<script type="text/javascript">
function calcular() {
var impresion =  document.getElementById("costeimpresion").value;
var costebruto = parseFloat(document.getElementById("Coste_Bruto").value = impresion*15);
   if (document.getElementById('impresion').value == 1)
        {document.getElementById('labelimpresion').value ='Impresas a 1 Cara';
		 document.getElementById('costeimpresion').value = 10;}

            else if(document.getElementById('impresion').value == 2)
                {document.getElementById('labelimpresion').value ='Impresas a 2 Caras';
				 document.getElementById('costeimpresion').value = 20;}
}
</script>  
</head>
<body onload="calcular();">
<form method="POST" action="" name="form">
<div id="Impresion">
<select name="impresion" id="impresion" class="select1" onFocus="foco(this);" onBlur="no_foco(this);" autocomplete="off" onchange="calcular();">
<option value="1">1 Cara</option>
<option value="2" selected>2 Caras</option>
</select>
</div>
<input style="border:none"  type="text" id="labelimpresion"/>
<input style="border:none"  type="text" id="costeimpresion"/>
<input style="border:none"  type="text" id="Coste_Bruto" value=""/>
</form>
</div>
</body>
</html>

GRACIAS

Alexis88 · #2 (**permalink**) 13/04/2017, 20:56

Al inicio, el costo bruto es cero porque multiplicas 15 por nada ya que todavía no se asignó un costo de impresión el cual defines más adelante en el código, resultando el producto en cero. Luego, como por defecto está seleccionada la opción de valor 2, el costo de impresión queda definido en 20 y es a partir de allí que se suscita el problema:

1. Eliges la opción de valor 1 (que es la otra opción por seleccionar) y resulta en 300 ya que multiplicas a 15 por el valor del costo de impresión que quedó previamente en 20; pero luego se define 10 como costo de impresión ya que seleccionaste la opción de valor 1, generándose así la confusión.
2. Luego, eliges la opción de valor 2 y se repite el problema solo que cambiando el valor del costo de impresión de 10 a 20, pero siempre tomando el valor previamente definido para calcular el costo bruto.

La solución más práctica consiste en que primero definas el valor del costo de impresión y luego calcules el costo bruto. En cristiano: primero las condiciones y luego la multiplicación.

unexes · #3 (**permalink**) 14/04/2017, 05:58

Gracias Alexis88
Entiendo perfectamente tu explicación y tiene toda su lógica y yo ya tenia claro el porque de su mal funcionamiento, pero mi problema es que estoy seguramente en una fase tonta y como no domino muy bien el Javascript, no consigo hacerlo funcionar.
Aplico la logica pero ni aun así encuentro la forma, seguro que es muy facil, pèro me he atascado y lo he intentado de cien maneras y en algunos casos me sale el "NaN" y vuelvo a empezar.
He intentado lo siguiente antes de la "function calcular()", he puesto otro "<script>", pero como ya te comento no funciona del todo bien.

Código:

<script>
var impresion =  20;
if (document.getElementById('costeimpresion').value == 0)
        {var impresion = 20;}

            else (document.getElementById('costeimpresion').value != 0)
			{var impresion = document.getElementById('costeimpresion').value;}
</script>

Alexis88 · #4 (**permalink**) 14/04/2017, 10:58

Me parece que tu problema no va tanto por el entendimiento del lenguaje sino por una cuestión lógica. Como te dije al final de mi anterior respuesta, tan solo debes cambiar el orden: primero las condiciones y luego las operaciones.

Código Javascript:

Ver original//Primero las condiciones
if (document.getElementById('impresion').value == 1){
    document.getElementById('labelimpresion').value ='Impresas a 1 Cara';
    document.getElementById('costeimpresion').value = 10;
}
else if(document.getElementById('impresion').value == 2){
    document.getElementById('labelimpresion').value ='Impresas a 2 Caras';
    document.getElementById('costeimpresion').value = 20;
}
 
//Y luego las operaciones   
var impresion =  document.getElementById("costeimpresion").value;
var costebruto = parseFloat(document.getElementById("Coste_Bruto").value = impresion*15);

Eso es todo.

DEMO

Como comentario, no encuentro sentido al hecho de almacenar el valor del costo bruto en una variable que nunca usas.

unexes · #5 (**permalink**) 15/04/2017, 02:39

Muchas Gracias Alexis88.
Ya funciona correctamente y te agradezco tu ayuda, había probado de tantas formas que seguro que así también lo había probado pero lógicamente cometiendo al mismo tiempo en alguna otra parte algún error, porque la solución al calculo siempre me había salido mal.
Referente a almacenar el valor de la operación en una variable es lógico que tal como esta el código que es una versión reducida del código total no tenga lógica, pero necesitare ese valor para seguir realizando operaciones cuando el código este completo.
De nuevo gracias.
Un saludo.