[SOLUCIONADO] Cambiar un input mediane otro input, que se repite

mariomb19 · #1 (**permalink**) 20/07/2015, 12:57

Buenas tardes,

Tengo una duda no tengo mucho conocimiento de javascript y lo que quiero hacer seguro me pueden ayudar.

Cambiar solo visual la cantidad de un input mediante un input, funciona bien pero solo agarra el primero, quisiera que de alguna forma no importa la cantidad de los input siempre se multiplique en todas.

De ante mano muchas gracias

Código HTML:

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
<script language="javascript">
function fAgrega()
{
document.getElementById("Text2").value = document.getElementById("Text1").value*6;
}
</script>

<body>

<input id="Text1" type="text" onkeyup="fAgrega();" />
<input id="Text1" type="text" onkeyup="fAgrega();" />
<input id="Text1" type="text" onkeyup="fAgrega();" />
<input id="Text1" type="text" onkeyup="fAgrega();" />
<input id="Text1" type="text" onkeyup="fAgrega();" />
<br />
<br />
<input id="Text2" type="text" disabled />
<input id="Text2" type="text" disabled />
<input id="Text2" type="text" disabled />
<input id="Text2" type="text" disabled />
<input id="Text2" type="text" disabled />
    
</body>
</html>

Alexis88 · #2 (**permalink**) 20/07/2015, 13:36

De inicio te digo que el id debe de ser un valor único en todo el documento. Puedes usar clases o nombres los cuales sí pueden repetirse.

Código HTML:

Ver original<input type = "text" class = "ejemplo" />
<input type = "text" class = "ejemplo" />
<input type = "text" class = "ejemplo" />

Y si deseas que la función afecte a todos los elementos, puedes hacerlo o bien con JavaScript en línea:

Código HTML:

Ver original<input type = "text" class = "ejemplo" oninput = "fagrega(this)" />

O delegando la función con el método addEventListener (ya no usarías la forma anterior):

Código Javascript:

Ver original[].forEach.call(document.querySelectorAll(".ejemplo"), function(element){
    element.addEventListener("input", function(){
        //Do stuff
    }, false);
});

Supongo que lo que buscas es que cada <input> oculto tome el valor escrito en la caja equivalente del grupo de arriba, entonces, podrías hacerlo así:

Código HTML:

Ver original<input type = "text" class = "ingresa" />
<input type = "text" class = "ingresa" />
<input type = "text" class = "ingresa" />
 
<input type = "hidden" class = "guarda" />
<input type = "hidden" class = "guarda" />
<input type = "hidden" class = "guarda" />

Código Javascript:

Ver original[].forEach.call(document.querySelectorAll(".ingresa"), function(element, index){
    element.addEventListener("input", function(){
        document.querySelectorAll(".guarda")[index].value = this.value;
    }, false);
});

El segundo argumento que puede recibir la llamada de retorno del método forEach es la posición que ocupa el elemento actual en el bucle en el array o conjunto de elementos (en este caso, de nodos) y es ese el valor que utilizo para tomar al <input> oculto equivalente al que estamos ingresando datos.

Saludos

EDITO: Por leer rápido, no me dí cuenta de que lo tienes son cajas de texto inhabilitadas mas no ocultas. De todas formas, funciona igual.

mariomb19 · #3 (**permalink**) 20/07/2015, 14:33

Hola muchas gracias por tu respuesta pero quede igual, el ejemplo que me diste no hace nada

Código HTML:

Ver original<!DOCTYPE html>
 
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
 
<body>
 
<input type = "text" class = "ingresa" />
<input type = "text" class = "ingresa" />
<input type = "text" class = "ingresa" />
 <br><br>
<input type = "text" class = "guarda" disabled />
<input type = "text" class = "guarda" disabled />
<input type = "text" class = "guarda" disabled />
    
</body>
</html>

Código Javascript:

Ver original[].forEach.call(document.querySelectorAll(".ingresa"), function(element, index){
    element.addEventListener("input", function(){
        document.querySelectorAll(".guarda")[index].value = this.value*6;
    }, false);
});

Alexis88 · #4 (**permalink**) 20/07/2015, 14:41

Seguramente colocaste el script en la cabecera del documento, antes de que carguen los elementos de la página, y no al final de esta.

Tienes dos opciones; o colocas el script al final:

Código HTML:

Ver original<!DOCTYPE html>
<html lang="es">
<head>
    <title>Ejemplo</title>
</head>
<body>
    <!-- Aquí irán los elementos de tu documento -->
    <script type="text/javascript">
        /* Aquí irá el código JavaScript */
    </script>
</body>
</html>

O puedes dejar el script en la cabecera, pero deberás de ejecutarlo al haber cargado el DOM:

Código Javascript:

Ver originaldocument.addEventListener("DOMContentLoaded", function(){
    /* Aquí irá el script */
}, false);

¿Cuál es la diferencia?

Con la primera forma, el script cargará cuando haya terminado de cargar el modelo de objetos del documento (DOM, los elementos del documento) y su contenido multimedia (fotos, audio, vídeos, si los hubiera), mientras que con la segunda forma, se ejecutará cuando solo haya terminado de cargar el DOM. Tú decides.

Saludos

mariomb19 · #5 (**permalink**) 20/07/2015, 14:46

Muchas gracias de verdad, funciona perfecto