Script embrujado: Resta cuando tiene que sumar

[setenta]

Hola. En el siguiente script, lo que hago es usar una lista select para seleccionar peso (en gramos) de un alimento, otro select para seleccionar los alimentos y dos cuadros de texto: en el primero, se escriben las calorias del alimento seleccionado y en el segundo, se van sumando todas las calorias de los alimentos seleccionados. Todo bien.
Como las calorias son por cada 100 gramos de alimentos, entonces, si selecciono los gramos de un alimento, como por ej. 300 gramos, debe multiplicar por 3 las calorias del alimento. Esto lo hace bien, pero mejor pongo un ejemplo.

Por ejemplo: supongamos que manzana tiene 60 calorias y banana tiene 80 calorias. Yo eligo 200 gramos de manzana (60x2=120 calorias) y 200 gramos de banana (80x2=160 calorias). Sumados dan 120+160 = 280. Pero si elijo ahora, por ejemplo, naranja (de 70 calorias) y pongo 500 gramos, debería sumar 5x70 = 350 y lo hace, el tema es que me pone 500 gramos de manzana y de banana tambien y lo suma a todo. Como podria solucionarlo? Gracias

<script language="javascript">
var valor; var texto; var indice; var textoEscogido;
function Propiedades(){
texto = document.formulario.cantidad.length
indice = document.formulario.cantidad.selectedIndex
valor = document.formulario.cantidad.options[indice].value
textoEscogido = document.formulario.cantidad.options[indice].text
}
var valor_total = 0;
var _list_kalorias = new Array(); //Array para _list_kalorias

document.write(valor);
function insertar_el_numero(op) {

var chosenoption=op.options[op.selectedIndex] //this refers to "selectmenu"
if (!isNaN(chosenoption.value)){
_list_kalorias.push(chosenoption);

calculate(); }
}
function calculate(){

var form = document.getElementById('formulario');
var txt='';
valor_total=0;
for(var i =0;i<_list_kalorias.length;i++ ){
var op = _list_kalorias[i];
txt+=op.text +':'+op.value*valor+"\n";
valor_total += parseInt(op.value*valor);
}
form.seleccionados.value=txt;
form.suma.value="Total: "+valor_total+" kcal" ;
}

// End -->
</script>

[IsaBelM]

para que no de desidia ayudarte, es conveniente que muestres el html correspondiente a ese script

[luis_vega]

Suposiciones:
Tienes dos lista select:
- cantidad: Sus opciones son <valor=cientos de gramos, texto= gramos>
- ??: Sus opciones son <valor=calorias por cada 100 gramos, texto= nombre alimento>

En algun momento, no se cuando, llamas a la funcion "Propiedades", en donde asignas a la variable global "valor" los cientos de gramos seleccionados en la lista select cantidad.


En algun momento, no se cuando (¿cuando eliges algun alimento?), llamas a la funcion "insertar_el_numero", que añade la informacion del alimento (calorias, nombre) seleccionado al array "_list_kalorias" y lanza el calculo del total de calorias para el conjunto de cantidades de alimentos seleccionadas.


El problema viene dado porque en ese calculo siempre empleas el mismo valor de cantidad, el último almacenado en la variable global "valor", en lugar del seleccionado en el momento que añadiste el alimento a la lista. Es decir tienes "n" alimentos, pero solo una cantidad, la misma, para todos ellos.

La solucion pasa por efectuar el calculo antes de que cambie el peso seleccionado o almacenar junto con cada alimento su cantidad.

La forma mas sencilla de arreglarlo es:
En lugar de llamar a "insertar_el_numero", llamar a "calculate", con el codigo modificado/simplificado asi:

Código:

<script language="javascript">
  var valor_total=0;
  
  function calculate(op) {
    var form = document.getElementById('formulario');
    var indice = form.cantidad.selectedIndex;
    var valor = form.cantidad.options[indice].value;
    var chosenoption=op.options[op.selectedIndex] //this refers to "selectmenu"
        
    valor_total += op.value*valor;
    
    form.seleccionados.value += op.text +':'+op.value*valor+"\n"; 
    form.suma.value = "Total: "+valor_total+" kcal" ;    
  }
</script>

Yo lo habria hecho asi:
Suponiendo que la lista select que contiene los posibles alimentos se llama "alimento".
Defino un "objeto" llamado "Seleccion" que representa cada par peso-alimento elegido por el usuario.
Cuando el usuario elige un alimento y una cantidad, llamo a la funcion "seleccionar", añadiendo el nombre del alimento, sus calorias y el peso seleccionado al array que representa el conjunto de selecciones realizado y llamo a la funcion calculate para sumarizar todo y actualizar la informacion.

Código:

var lista = new Array();

function Seleccion(nombre, calorias, c_gramos) {
  this.nombre = nombre;
  this.calorias = calorias;
  this.c_gramos = c_gramos;
}


function seleccionar() {
  var form = document.getElementById('formulario');
  var indice = form.cantidad.selectedIndex;
  var c_gramos = form.cantidad.options[indice].value;
  indice = form.alimento.selectedIndex;
  var calorias = form.alimento.options[indice].value;
  var nombre = form.alimento.options[indice].text;
  
  lista.push(new Seleccion(nombre,calorias,c_gramos));
  calculate(); 
}


function calculate() {
  var texto = "";
  var suma_calorias = 0;
  for(var i=0; i<lista.length; i++) {
    var seleccion = lista[i];
    var calorias_seleccion = (seleccion.calorias * seleccion.c_gramos);
    texto += seleccion.nombre + ":" + calorias_seleccion + "\n";
    suma_calorias += calorias_seleccion;
  }
  var form = document.getElementById('formulario');
  form.seleccionados.value=texto;
  form.suma.value="Total: "+suma_calorias+" kcal" ;
}

[setenta]

Hola Luis y gracias por contestar. Ya me parecía que había que reestructurar el script, no veia bien como podía tomar el par gramos/alimento. El tema de llamar a la funcion una vez elegido el par peso/alimento es muy buena, limpiando un poco el script, ya que antes hacia eso, pero como vez mezclaba todo.

Suposiciones:
Tienes dos lista select:
- cantidad: Sus opciones son <valor=cientos de gramos, texto= gramos>
- ??: Sus opciones son <valor=calorias por cada 100 gramos, texto= nombre alimento>

Respuesta: El primer select selecciona una lista de valores de peso en gramos (100, 200, etc de texto, con un valor de 1,2, etc respectivamente).
El segundo select selecciona una lista de alimentos (por ejemplo, jamon) pero en el cuadro de texto escribe el alimento y las calorias por 100 gramos, (ponele, jamon : 250 calorias /100 gramos), porque ambas columnas son traidas de la base de datos sql con php.
Lógicamente, si el usuario selecciona 200 gramos, y su option value=2, entonces debe multiplicar las 250 calorias x 2, dando un par de jamon : 500 calorias (ya que seleccionó el doble). Si es el triple, serían 750, etc.


Para aclarar dudas (principalmente a IsaBel ), coloco todo el código (js+xhtml) para que vean como puse los objetos select y cuadros de texto. Es muy buena tu idea Luis, ya voy a ver como la voy probando y reestudiando el código. Muchas gracias. Por ahora, lo antiguo:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tu Dieta</title>
<p align="center"><b>Selecci&oacute;n y adici&oacute;n de elementos a una lista</b></p>
<script language="javascript">
var valor="1";
var texto;
var indice;
var valor_total = 0;
var _list_kalorias = new Array(); //Array para _list_kalorias

function Propiedades(){
texto = document.formulario.cantidad.length
indice = document.formulario.cantidad.selectedIndex
valor = document.formulario.cantidad.options[indice].value
}

function insertar_el_numero(op) {

var chosenoption=op.options[op.selectedIndex] //this refers to "selectmenu"
if (!isNaN(chosenoption.value)){
_list_kalorias.push(chosenoption);

calculate(); }
}
function calculate(){

var form = document.getElementById('formulario');
var txt='';
valor_total=0;
for(var i =0;i<_list_kalorias.length;i++ ){
var op = _list_kalorias[i];
txt+=op.text +':'+op.value*valor+"\n";
valor_total += parseInt(op.value);
}
form.seleccionados.value=txt;
form.suma.value="Total: "+valor_total+" kcal" ;
}

// End -->
</script>
</head>
</b>
<body style="font-family: Verdana">
</p>
<form id="formulario" name="formulario" action=""/>
<select name="cantidad" onchange="Propiedades()"/>
<option value="1" selected="selected">100 gramos</option>
<option value="2">200 gramos</option>
<option value="3">300 gramos</option>
<option value="4">400 gramos</option>
<option value="5">500 gramos</option>
</select>
<select name="form_carnes" onchange="insertar_el_numero(this);"/>
<?php
mysql_query ("SET NAMES 'utf8'");
do {
?>
<option value="<?php echo $row_registro_carnes['kilocalorias'] ?>"><?php echo $row_registro_carnes['nombre']?></option>
<?php
} while ($row_registro_carnes = mysql_fetch_assoc($registro_carnes));
$rows = mysql_num_rows($registro_carnes);
if($rows > 0) {
mysql_data_seek($registro_carnes, 0);
$row_registro_carnes = mysql_fetch_assoc($registro_carnes);
}
?>

</select>
<select name="form_cereales" onchange="insertar_el_numero(this);"/>

<?php
mysql_query ("SET NAMES 'utf8'");
do {
?>
<option value="<?php echo $row_registro_cereal['kilocalorias'] ?>"><?php echo $row_registro_cereal['nombre']?></option>
<?php
} while ($row_registro_cereal = mysql_fetch_assoc($registro_cereal));
$rows = mysql_num_rows($registro_cereal);
if($rows > 0) {
mysql_data_seek($registro_cereal, 0);
$row_registro_cereal = mysql_fetch_assoc($registro_cereal);
}
?>
</select><font face="Arial, Helvetica, Sans Serif" size="2">Cereales:</font>
<font face="Arial, Helvetica, Sans Serif" size="2">Elementos a&ntilde;adidos a la lista:</font><br>
<textarea cols="40" rows="10" name="seleccionados">&nbsp;</textarea>
<textarea cols="20" rows="10" name="suma"></textarea>
</form>

<!-- AQUI COMIENZA EL OTRO -->
<form id="form-cereales" name="formularios2" action=""/>
</form>


</body>
</html>

<?php
mysql_free_result($registro_carnes);
mysql_free_result($registro_cereal);
?>

Nota: Falta una parte del codigo php (que esta encima del html y que no tiene importancia, solo js y formularios). SALUDOS!!!!!!!!!!!!!!!!!!!!!