[SOLUCIONADO] Realizar suma y multiplicación

[juancarsantana]

Buen día.

Tengo este formulario:

Código Javascript:

<script type="text/javascript">
 
function calcular(){
var valor_1= document.formulario.s_aleta_delantera_izquierda[document.formulario.s_aleta_delantera_izquierda.selectedIndex].value;
var valor_2= document.formulario.s_puerta_delantera_izquierda[document.formulario.s_puerta_delantera_izquierda.selectedIndex].value;
var valor_3= document.formulario.s_puerta_trasera_izquierda[document.formulario.s_puerta_trasera_izquierda.selectedIndex].value;
var valor_4= document.formulario.s_aleta_trasera_izquierda[document.formulario.s_aleta_trasera_izquierda.selectedIndex].value;
var valor_5= document.formulario.s_paragolpes_delantero[document.formulario.s_paragolpes_delantero.selectedIndex].value;
var valor_6= document.formulario.s_paragolpes_trasero[document.formulario.s_paragolpes_trasero.selectedIndex].value;
var valor_7= document.formulario.s_capo[document.formulario.s_capo.selectedIndex].value;
var valor_8= document.formulario.s_maletero[document.formulario.s_maletero.selectedIndex].value;
var valor_9= document.formulario.s_optica[document.formulario.s_optica.selectedIndex].value;
var valor_10= document.formulario.s_techo[document.formulario.s_techo.selectedIndex].value;
var valor_11= document.formulario.s_espejo[document.formulario.s_espejo.selectedIndex].value;
var valor_12= document.formulario.s_aleta_delantera_derecha[document.formulario.s_aleta_delantera_derecha.selectedIndex].value;
var valor_13= document.formulario.s_puerta_delantera_derecha[document.formulario.s_puerta_delantera_derecha.selectedIndex].value;
var valor_14= document.formulario.s_puerta_trasera_derecha[document.formulario.s_puerta_trasera_derecha.selectedIndex].value;
var valor_15= document.formulario.s_aleta_trasera_derecha[document.formulario.s_aleta_trasera_derecha.selectedIndex].value;
 
var detalle = new Array();
detalle[1] = valor_1.split(‘|’);
detalle[2] = valor_2.split(‘|’);
detalle[3] = valor_3.split(‘|’);
detalle[4] = valor_4.split(‘|’);
detalle[5] = valor_5.split(‘|’);
detalle[6] = valor_6.split(‘|’);
detalle[7] = valor_7.split(‘|’);
detalle[8] = valor_8.split(‘|’);
detalle[9] = valor_9.split(‘|’);
detalle[10] = valor_10.split(‘|’);
detalle[11] = valor_11.split(‘|’);
var descripcion_txt = “;
var estado_txt = “;
var precio_txt = “;
var suma_precio = null;
for (i=1;i<=11;i++) {
   if (detalle[i][0] !=0) {
       descripcion_txt = descripcion_txt+detalle[i][0]+’<br />’;
        estado_txt = estado_txt+detalle[i][1]+’<br />’;
        precio_txt = precio_txt+detalle[i][2]+’.00 &euro;<br />’;
        suma_precio = suma_precio + parseInt(detalle[i][2]);
      }
   }
var suma_igic = suma_precio * 0.7;
var total = suma_precio + suma_igic;
if (suma_precio > 0) {
    document.getElementByld(’descripcion’).innerHTML = descrpcion_txt;
    document.getElementByld(’estado’).innerHTML = estado_txt;
    document.getElementByld(’precio’).innerHTML = precio_txt;
    document.getElementByld(’total_precio’).innerHTML = suma_precio.toFixed(2)+’ &euro;<br />’+suma_igic.toFixed(2)+’ &euro;<br /><b>’+total.toFixed(2)+’</b> &euro;’;
   } else {
    document.getElementByld(’descripcion’).innerHTML = ’&nbsp;’;
    document.getElementByld(’estado’).innerHTML = ’&nbsp;’;
    document.getElementByld(’precio’).innerHTML = ’&nbsp;’;
    document.getElementByld(’total_precio’).innerHTML = ’’;
   }
 
}
 
</script>
 

No consigo que seleccionando unos campos me los muestre en pantalla

[codeams]

¿Hay algún error en la consola? Sinceramente no entendí cual fue el problema. Por favor se más específico o deja un live-demo.

[juancarsantana]

Gracias por responder:

El enlace sería éste: www.talleresvehincar.com/presupuestos/

Al seleccionar la parte del coche con el importe, debería sali automáticamente en descripción, daño y precio , y sacar subtotal,igic,.....

Nuevamente gracias.

[codeams]

La consola de chrome devtools me arroja 2 advertencias y un error.

Centremonos en el error: Línea 31 de index.html:

Código Javascript:

function calcular(); // ese ';' que no estaba creo que es el que procova el error
var valor_1= document.formulario.s_aleta_delantera[document.formulario.s_aleta_delantera.selectedIndex].value;
 

[juancarsantana]

Iniciado por codeams

La consola de chrome devtools me arroja 2 advertencias y un error.

Centremonos en el error: Línea 31 de index.html:

Código Javascript:

function calcular(); // ese ';' que no estaba creo que es el que procova el error
var valor_1= document.formulario.s_aleta_delantera[document.formulario.s_aleta_delantera.selectedIndex].value;
 

A mi no me sale el ; despues de ()

Saludos

[codeams]

Es justo eso, agregalo.

El error que me arroja chrome es el siguiente: Uncaught SyntaxError: Unexpected token var | /presupuestos/:32

error que se presenta porque algo antes no se concluyo antes de declarar la variable, por eso supongo que el error es ese ";" que hace falta.

[juancarsantana]

Aregado y sigue igual.

[codeams]

Jaja, ahora el error es el ;.

Bueno pregunta: ¿Lo que esta en la linea 32,33,34,35,etc son la función "calcular"?

Si es asi el codigo correcto sería:

Código Javascript:

function calcular(){
var valor_1= document.formulario.s_aleta_delantera[document.formulario.s_aleta_delantera.selectedIndex].value;
var valor_2= document.formulario.s_puerta_delantera[document.formulario.s_puerta_delantera.selectedIndex].value;
/* y todo lo que sige hasta donde termine la funcion */
}
 

Si no es eso la funcion calcular y lo que quieres hacer es ejecutarla entonces no tienes porque poner "function". Debería quedar asi:

Código Javascript:

calcular();
var valor_1= document.formulario.s_aleta_delantera[document.formulario.s_aleta_delantera.selectedIndex].value;
var valor_2= document.formulario.s_puerta_delantera[document.formulario.s_puerta_delantera.selectedIndex].value;
/* y todo lo que sigue... */
 

Espero ya esto lo solucione (:

[juancarsantana]

Gracias. Pero sigue sin funcionar.

[codeams]

Ahora estoy obteniendo el siguiente error en la consola:

Uncaught SyntaxError: Unexpected token ILLEGAL | en la línea 37 de index.html

No se muy bien a que se deba esto, quizá es momento de hacer un nuevo tema.

Lamento no haber podido solucionar el problema.

[juancarsantana]

Gracias de todas maneras.

[bathorz]

He visto la página y me pareció interesante.
Prueba de este modo y dime si te sirve.

Código Javascript:

window.onload = function() {
        var test = document.getElementById('test');
        var form1 = document.getElementById('form1');  
        var elem = document.getElementsByName('s');
 
        form1.addEventListener('change', function(e) {
          calcular();
        });
 
        function calcular() {
          var detalle = new Array();
          var descripcion_txt = '';
          var estado_txt = '';
          var precio_txt = '';
          var precio = 0;
          var suma_precio = 0;
          var bloque = '';
 
          for (var i = 0; i < elem.length; i++) {
            detalle[i] = elem[i].value.split('|'); // (|) sin espacios
            if (elem[i].value !== '0') {
              descripcion_txt = detalle[i][0] + '<br />';
              estado_txt = detalle[i][1] + '<br />';
              precio_txt = parseInt(detalle[i][2]);
              precio = precio_txt.toFixed(2);
              suma_precio += parseInt(detalle[i][2]);
              bloque += descripcion_txt + estado_txt + precio + '€<hr />';
            }
          }
          suma_precio += suma_precio * 0.07;
          test.innerHTML = bloque + 'Total: ' + suma_precio.toFixed(2) + '€';
        }
      };
 

Código HTML:

<div id="test">test</div>
    <div>
      <fieldset class="form1">
        <legend>Datos</legend>
        <form id="form1" action="#" name="formulario">
          <span class="t_aleta_delantera_izquierda">Aleta delantera</span>
          <span>
            <select name="s"><option value="0">Seleccionar</option><option value="Aleta delantera izquierda|Leve|75">Leve: 75 €</option><option value="Aleta delantera izquierda|Medio|90">Medio: 90 €</option><option value="Aleta delantera izquierda|Fuerte|120">Fuerte: 120 €</option></select></span>
          &nbsp;
          <span class="t_puerta_delantera_izquierda">Puerta delantera</span>
          <span>
            <select name="s"><option value="0">Seleccionar</option><option value="Puerta delantera izquierda|Leve|90">Leve: 90 €</option><option value="Puerta delantera izquierda|Medio|110">Medio: 110 €</option><option value="Puerta delantera izquierda|Fuerte|120">Fuerte: 120 €</option></select></span>
          &nbsp;
          <span class="t_techo">Techo</span>
          <span>
            <select name="s"><option value="0">Seleccionar</option><option value="Techo|Leve|120">Leve: 120 €</option><option value="Techo|Medio|150">Medio: 150 €</option><option value="Techo|Fuerte|180">Fuerte: 180 €</option></select></span>&nbsp;
          &nbsp;
          <span class="t_espejo">Espejos</span>
          <span>
            <select name="s"><option value="0">Seleccionar</option><option value="1 Espejo|Leve|25">1 Leve: 25 €</option><option value="2 Espejos|Leve|50">2 Leve: 50 €</option><option value="1 Espejo|Medio|40">1 Medio: 40 €</option><option value="2 Espejos|Medio|80">2 Medio: 80 €</option></select></span>
          &nbsp;
        </form>
      </fieldset>
    </div>
 

[juancarsantana]

Va perfecto.

Tengo que adaptarlo, pero me hace lo que quiero......en principio.

Saludos y gracias.

( iré informando )

[juancarsantana]

Buen día.

Llevo probando los datos facilitados y me da algún error.

http://talleresvehincar.com/presupuestos/

El total me da un símbolo raro y me descuadra la posición de los desplegables que en un simulador me salen perfectos.

Saludos.

[bathorz]

Posicionas el span y el select lo dejas fuera.
El select dentro:
<p><span posicionamiento absoluto><select></span></p>

Código HTML:

<p>
  <span style="position: absolute; top: 369px; left: 20px;"><br>
    <select name="s">
      <option selected="selected" value="0">Seleccionar</option>
      <option value="Aleta delantera|Leve|75">Leve: 75 €</option>
      <option value="Aleta delantera|Medio|90">Medio: 90 €</option>
      <option value="Aleta delantera|Fuerte|120">Fuerte: 120 €</option>
    </select>
  </span>
</p>
 

[juancarsantana]

Buen dia y gracias por la respuesta.

Está tal cual me lo envias como prueba, y hay algo que no me estádejando posicionarlo
y no sé que es.

En el simulador me deja posicionarlo donde quiera, pero en la web no.

Saludos.

[bathorz]

He ido a la página http://talleresvehincar.com/presupuestos/ en horario de este servidor 10:00. El código que llega al navegador es este:

Código HTML:

<div class="sixteen columns outercontainer" id="content">
  <div class="post-62 page type-page status-publish hentry" id="post-62">
    <div>
      <img class="aligncenter size-full wp-image-328" alt="Partes del Coche" src="http://talleresvehincar.com/wp-content/uploads/2014/03/Partes-del-Coche.png" width="920" height="767" />
      </p><!-- este /p sobra -->
      <p><span style="position: absolute; top: 369px; left: 320px;">
      </p><!-- este /p sobra -->
      <select name="s">
        <option selected="selected" value="0">Seleccionar</option>
        <option value="Aleta delantera|Leve|75">Leve: 75 €</option>
        <option value="Aleta delantera|Medio|90">Medio: 90 €</option>
        <option value="Aleta delantera|Fuerte|120">Fuerte: 120 €</option>
      </select>
      <p><!-- este p sobra -->
        </span>
      </p>
    </div>
  </div>
</div>
 

Quita las etiquetas que están comentadas.

He hecho los cambios y el select va a su sitio, al menos con Firefox, debajo del texto "Aleta delantera" de la imagen.

Código HTML:

<p>
  <span style="position: absolute; top: 850px; left: 20px;">
    <select name="s">
      ...
    </select>
  </span>
</p>
 

[juancarsantana]

Muy buenas.

Necesitaría que el resultado saliera al final y no sé exactamente por qué me da error en el total.

Saludos y gracias nuevamente.

[bathorz]

Veo que ya has posicionado los resultados al final, bien.
Con respecto al error de total he visto algo en el 1er. select, depende del clima y del navegador obtengo:
<option selected="selected value=" 0"="">Seleccionar</option>
o
<option selected="selected value=" 0">Seleccionar</option>

No le veo mucho sentido a tener selected aquí, pero si quieres usarlo:
<option value="0" selected>Seleccionar</option>
Mejor aún quítalo y déjalo como los demás.
<option value="0">Seleccionar</option>

[juancarsantana]

Muchísimas gracias. Todo perfecto.

Me gustaría posicionar los datos aquí:

Código HTML:

<h2 style="text-align: center;"><strong><span style="color: #ff0000;">Calcule usted mismo su presupuesto de pintura</span></strong></h2>
<p class="mensaje" style="text-align: center;"><span style="color: #000000;"><strong>Seleccione las partes del vehículo que desea incluir y le proporcionaremos un presupuesto.</strong></span></p>
<div class="superior_presupuesto">
<div class="info">
<h4>Tipo de daño del vehículo</h4>
<ul>
<li>
<span class="rojo">Daño leve: </span>
Rayas pequeñas.
</li>
<li>
<span class="rojo">Daño medio:</span>
Golpes pequeños.
</li>
<li>
<span class="rojo">Daño fuerte:</span>
Golpes grandes.
</li>
</ul>
</div>
<div class="desglose_presupuesto">
<table class="desglose_presupuesto" width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td class="datos" colspan="3">
<form action="#" name="datos">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td class="pequeno"></td>
<td class="obligatorios_span">
<h5>* campos obligatorios</h5>
</td>
</tr>
<tr>
<td class="etiqueta">Nombre y apellidos:</td>
<td>
<input type="text" name="nombre">
</td>
</tr>
<tr>
<td class="etiqueta">Marca:</td>
<td>
<input type="text" name="marca">
</td>
</tr>
<tr>
<td class="etiqueta">Modelo:</td>
<td>
<input type="text" name="modelo">
</td>
</tr>
<tr>
<td class="etiqueta">Teléfono:</td>
<td>
<input type="text" name="telefono">
</td>
</tr>
<tr>
<td class="etiqueta"> </td>
<td></td>
</tr>
</tbody>
</table>
</form>
</td>
</tr>
<tr>
<td class="titulo tit_desc">Descripción</td>
<td class="titulo">Daño</td>
<td class="titulo tit_precio">Precio</td>
</tr>
<tr>
<td id="descripcion" class="descripcion"></td>
<td id="estado" class="estado"> </td>
<td id="precio" class="precio"></td>
</tr>
<tr>
<td class="igic" colspan="2">
Subtotal
<br>
IGIC  7%
<br>
TOTAL
<br>
<h5>Presupuesto sujeto a aprobación del taller</h5>
</td>
<td id="total_precio" class="total"></td>
</tr>
</tbody>
</table>
</div>
<div class="clearer"></div>
</div>
 

O parecido.

Nuevamente agradecido.

[bathorz]

Apurando el trazo, poniendo, sacando... y más o menos sería algo como esto.

* Elimino, ya no se usa:
var test = document.getElementById('test');
<div id="test">test</div>

* CSS. agrego:
.total{vertical-align: top;}

* Javascript:

Código Javascript:

window.onload = function() {
        var estado = document.getElementById('descripcion');
        var descripcion = document.getElementById('estado');
        var iPrecio = document.getElementById('precio');
        var total = document.getElementById('total_precio');
 
        var form1 = document.getElementById('form1');
        var elem = document.getElementsByName('s');
 
        form1.addEventListener('change', function(e) {
          calcular();
        });
 
        function calcular() {
          var detalle = new Array();
          var suma_precio = 0;
          var p_desc = '';
          var p_estado = '';
          var pPrecio = '';
          
          for (var i = 0; i < elem.length; i++) {
            detalle[i] = elem[i].value.split('|'); // (|) sin espacios
            if (elem[i].value !== '0') {
              p_desc += detalle[i][0] + '<br />';
              p_estado += detalle[i][1] + '<br />';
              pPrecio += parseInt(detalle[i][2]).toFixed(2) + '<br />';
              suma_precio += parseInt(detalle[i][2]);
            }
          }
          // Descripción
          estado.innerHTML = p_desc;
          // Daño
          descripcion.innerHTML = p_estado;
          // Precio
          iPrecio.innerHTML = pPrecio;
          // Calc %
          var igic;
          igic = suma_precio * 0.07;
          // final
          var final;
          final = (suma_precio * 0.07) + suma_precio;
          //
          total.innerHTML = suma_precio.toFixed(2) + '€<br />' +  igic.toFixed(2) + '€<br />' + final.toFixed(2) + '€';
        }
      };
 

[juancarsantana]

Perfecto.

Ahora lo intentaré situar a la derecha.

Mil gracias.