[SOLUCIONADO] Ejecutar funcion JS en inputs con el mismo id

[ansisweb]

No puedo llamar a la función varias veces para hacer cálculos, esto haciendo conexión con bd, pero dejo el siguiente ejemplo para explicar lo que necesito.

Esta es un calculadora, como ven llamo a una función js para tomar los valores de los inputs y luego devuelvo un resultado, el problema es que esto solo funciona en la primera linea, luego no se ejecuta la asignación de valores. Por favor acepto sugerencias para una solución

JS
function prueba()
{
var uno = document.getElementById('uno').value;
var dos = document.getElementById('dos').value;
var suma = parseInt(uno) + parseInt(dos);
document.getElementById('tres').value = suma;
}

HTML PHP

<table>
<thead>
<tr>
<td>Numero 1</td>
<td>Numero 2</td>
<td>Resultado</td>
</tr>
</thead>
<tbody>
<?php
for ($i=0; $i < 10 ; $i++) {
# code...

?>
<tr>
<td><input type="text" placeholder="0.0" id="uno" value="0" onKeyUp="prueba()"></td>
<td><input type="text" placeholder="0.0" id="dos" value="0" onKeyUp="prueba()"></td>
<td><input type="text" placeholder="0.0" id="tres" value="0" onKeyUp="prueba()"></td>
</tr>
<?php } ?>
</tbody>
</table>

[juanito1712]

la consola dice algo?

[juanito1712]

estoy viendo que esos campos están en tuna tabla, se repiten los ids en cada tr?

[Pantera80]

Código:

<td><input type="text" placeholder="0.0" id="uno" value="0" onKeyUp="prueba()"></td>
<td><input type="text" placeholder="0.0" id="dos" value="0" onKeyUp="prueba()"></td>
<td><input type="text" placeholder="0.0" id="tres" value="0" onKeyUp="prueba()"></td>

Creo que el problema es que llamas a la función prueba() cada vez que alguien introduce un dato en el input uno y dos

Deberías dejarlo solo en el campo dos, sino cuando introduzcas el primer valor ya no cogerá el segundo:

Código:

<td><input type="text" placeholder="0.0" id="uno" value="0" ></td>
<td><input type="text" placeholder="0.0" id="dos" value="0" onKeyUp="prueba()"></td>
<td><input type="text" placeholder="0.0" id="tres" value="0" ></td>

[ZedGe1505]

El problema es por que creas N input llamado UNO, DOS, TRES por lo que tu función no sabe que valor tomar... de hecho a partir del segundo input tu función prueba siempre tomará los valores del primer UNO y DOS...

[ansisweb]

Iniciado por juanito1712

la consola dice algo?

No, no sale ningún error

[ansisweb]

Iniciado por juanito1712

estoy viendo que esos campos están en tuna tabla, se repiten los ids en cada tr?

Si lo se, ese es precisamente mi problema, quiero saber que alternativas tengo.
Llevandolo a mi proyecto tengo un tabla X que tiene N cantidad de items, estos items tienen relacion con un detalle, por lo que debo listarlos todos, luego el usuario agrega datos que se caulculan y se enviaran.

[ansisweb]

Todos me ha dicho mas omenos lo mismo y estoy de acuerdo, el problema debe ser que tengo los mismos ids, y como lo que ejecuto es un bucle js no debe saber como interpretar al momento de ejecutar la funcion, ahora que alternativas tengo.

Lo que quiero es poder en un formulario con X cantidad de items poder ir metiendo datos y que estos se calculen internamente y se asignen a las cajas para que yo baya viendo los resultados. Básicamente estoy haciendo un sistema que agarra los productos y luego pide datos para que se hagan proyecciones sobre compras, margenes de ganancia etc. Entonces como necesito que el calculo se haga al momento de ingresar el dato use como en el ejemplo una función que se llama por medio de onKeyUp. Funciona tal cual lo necesito, el problema es que como hay un bucle que lista todos los productos el js deja de funcionar y eso es lo que necesito solucionar.

[ZedGe1505]

Dentro del FOR crea una forma en que tus input estén relacionados... me explico

Cada vez que estas en el bucle creas 3 input si?
Puedes crear una clase o un name que te indique que los 3 están relacionado no sé pueden tener clase "input1" donde ese 1 se incrementa según el for, después creas la función así

Código Javascript:

onKeyUp="prueba(this)"
 

y ya sabrás qué input fue el que llamó a la función y que nombre o clase tiene... es solo una idea xD

[ansisweb]

Hola ZedGe1505 muchas gracias por la sugerencia pero no me queda del todo claro, podrías pasarme un ejemplo rapido con mi otro ejemplo de la calculadora, si solucionamos que la calculadora funcione estamos del otro lado, saludos.

[ansisweb]

Iniciado por juanito1712

estoy viendo que esos campos están en tuna tabla, se repiten los ids en cada tr?

Hola ZedGe1505 muchas gracias por la sugerencia pero no me queda del todo claro, podrías pasarme un ejemplo rapido con mi otro ejemplo de la calculadora, si solucionamos que la calculadora funcione estamos del otro lado, saludos.

[juanito1712]

como bien te están diciendo, al tener el ids repetidos, javascript solo es capaz de encontrar los datos del primero, ya que no espera que se repita ese atributo. Una solucion a eso es la siguiente


<?
for(x=0;x<10;x++){
echo '<input type="text" id="elemento'.$x.'" onkeyup="hazloquesea('.$x.')">';
}
?>
<script>
function hazloquesea(elem){
console.log(document.getElementById('elemento'+ele m).value);
}
</script>

y recuerda, un Id jamás se puede repetir

[ZedGe1505]

Prueba esto

Código HTML:

<table>
<thead>
<tr>
<td>Numero 1</td>
<td>Numero 2</td>
<td>Resultado</td>
</tr>
</thead> 
<tbody>
<tr>
<td><input type="text" placeholder="0.0" id="uno" class="input1" value="0" onKeyUp="prueba(this)"></td>
<td><input type="text" placeholder="0.0" id="dos" class="input1a" value="0" onKeyUp="prueba(this)"></td>
<td><input type="text" placeholder="0.0" id="tres" class="input1b" value="0" onKeyUp="prueba(this)"></td>
</tr> 
<tr>
<td><input type="text" placeholder="0.0" id="uno" class="input2" value="0" onKeyUp="prueba(this)"></td>
<td><input type="text" placeholder="0.0" id="dos" class="input2a" value="0" onKeyUp="prueba(this)"></td>
<td><input type="text" placeholder="0.0" id="tres" class="input2b" value="0" onKeyUp="prueba(this)"></td>
</tr> 
</tbody> 
</table>
 

Código Javascript:

function prueba(valorInput){
    //Obtienes la clase que genera el evento, sin contar la ultima letra
  var clase = valorInput.className.substring(0,6);
    //obtienes valor de los input correspondientes
  var y = document.getElementsByClassName(clase)[0].value;
  var z = document.getElementsByClassName(clase+'a')[0].value;
  //escribes el resultado
  document.getElementsByClassName(clase+'b')[0].value = parseInt(y)+parseInt(z);
  
}
 

es solo un ejemplo y debe de haber una opción mucho más limpia pero es lo que se me ocurre a la rápida y siendo un programador medio xD

[ansisweb]

Gracias a todo y a ti ZedGe1505 tome tu ejemplo y lo adapte a mi proyecto, con la pequeña variacion gracias a todossssssss