Cambia una entrada cuando cambias otra en javascript

Tengo dos campos de entrada.
Por ejemplo: Uno donde escribes un color y otro para el código del color.

Me gusta: |Green| |#008000|

No quiero aprender cómo encontrar el código de color sino cómo hacer coincidir un valor o variable con otro. Fue solo un ejemplo.

Lo que quiero saber es cómo puedo generar automáticamente uno de los campos cuando completo el segundo. Cuando escribo 'verde' en el primer campo, quiero que el código aparezca automáticamente en el segundo y viceversa. Solo quiero hacerlo por unos pocos colores.

<html>
<head>
  <script type="text/javascript">

var inputA = document.getElementById("color");
var inputB = document.getElementById("code");

inputA.onkeyup = function() {
   var v = this.value.toLowerCase();
    if (colormapping.color2code[v]){
       inputB.value = colormapping.color2code[v];
    } else {
        inputB.value = '';
    }
   }
inputB.onkeyup = function() {
   var v = this.value.toUpperCase();
    if (colormapping.code2color[v]){
        inputA.value = colormapping.code2color[v];
    } else {
        inputA.value = '';
    }
}
colormapping = {
    color2code:{
       green : '#008000',
       red   : '#FF0000'
    },
    code2color:{
       '#008000':'green',
       '#FF0000':'red'
    }
}
</script>
</head>

<body>
Name:<br />
<input id="color"><br />
Code:<br />
<input id="code">

</body>
</html>

Esto es lo lejos que he llegado. El problema probablemente son mis etiquetas. ¿Por qué no funciona? :/

preguntado el 31 de julio de 12 a las 13:07

Esta pregunta es muy genérica y probablemente sería mejor en programadores.stackexchange.com -

Podría ser el caso. Publicaré allí. TY-

@ user1516844 Este es casi seguro un tema para SO, y probablemente fuera de tema para los programadores. -

3 Respuestas

Intente lo siguiente: Ejemplo

Básicamente, necesita un objeto de comparación con el que pueda verificar.

colormapping = {
    color2code:{
       green : '#008000',
       red   : '#FF0000'
    },
    code2color:{
       '#008000':'green',
       '#FF0000':'red'
    }
}​

Y luego el detector de eventos correspondiente:

inputA.onkeyup = function() {
   var v = this.value.toLowerCase();
   (colormapping.color2code[v])?
       inputB.value = colormapping.color2code[v]:
       inputB.value = '';
}

y viceversa para inputB:

inputB.onkeyup = function() {
   var v = this.value.toUpperCase();
    if (colormapping.code2color[v]){
        inputA.value = colormapping.code2color[v];
    } else {
        inputA.value = '';
    }   
}

Ambos tienen básicamente el mismo Código - el primero usa un ternario if operador en lugar del clásico si.

(muy avanzado: si desea hacerlo agradable, envuélvalo en una función anónima para proteger el mapeo de alteraciones y evitar la contaminación del espacio de nombres global).

Respondido 02 ago 12, 08:08

colormapping es un objeto javascript: escribiría todo el código que ve en el violín de ejemplo en <script type="text/javascript> ...code here... </script> Etiquetas. - Christoph

Bien. He cambiado mis dos ID de entrada a la entrada A y la entrada B. Intenté copiar y pegar tu código pero no funcionó. ¿Qué puede estar mal? - user1516844

@ user1516844 tienes que ajustar el primero a las líneas var inputA = document.getElementById("<your Id here>"); para que coincida con los ID de sus elementos. - Christoph

Cambié: var v = this.value.toLowerCase(); a: var inputA = document.getElementById("inputA"); Aunque todavía no me funciona. :/ - user1516844

@user1516844 nono, ve al ejemplo jsfiddle.net/jPPjr/7 y prueba el código de allí. - Christoph

No estoy seguro si esto ayudará. Lo que pude entender es que, cuando cambia el valor de la entrada A, desea cambiar el valor de la entrada B. Si es:

var inputA = document.getElementById("inputA");
var inputB = document.getElementById("inputB");
inputA.onkeyup = function() {
   inputB.value = inputA.value
}

Compruebe jsFiddle de cómo hacerlo. Si esto no es lo que quieres, siéntete libre de votar negativamente.

http://jsfiddle.net/9xeXC/

Respondido 31 Jul 12, 13:07

No es tan simple, me temo. Mi explicación no fue la mejor. Quiero que los dos valores diferentes coincidan entre sí para que cuando escriba verde se muestre otro valor (no verde). Cuando escribe el código de color para el verde, quiero que la primera entrada se dé cuenta de eso y cambie automáticamente su valor a "verde". - user1516844

Entonces, en lugar de inputB.value = inputA.value puedes cambiar el inputA.value con el resultado que se va a enviar desde el código. - André Silva

Puede usar el evento onchange para javascript.

HTML:

<input type="text" id="input1" onchange="input1_changed">
<input type="text" id="input2" onchange="input2_changed">

Y en las funciones de JavaScript, use una declaración de cambio para cambiar la otra entrada según el valor de la entrada modificada

JavaScript:

function input1_changed() {
  var value = document.getElementById("input1").value;
  switch (value) {
    case "Green":
      document.getElementById("input2").value = "#00FF00";
      break;
    // continue for other colors
  }
}

function input2_changed() {
  var value = document.getElementById("input2").value;
  switch (value) {
    case "#00FF00":
      document.getElementById("input1").value = "Green";
      break;
    // continue for other values
  }
}

Respondido 31 Jul 12, 14:07

Su solución no es incorrecta, pero un objeto con clave (como en la respuesta de @Christoph) es mucho más legible y menos detallado que un switch declaración. No digo esto para promover su respuesta (señalo su respuesta solo para no tener que escribir un ejemplo yo mismo), sino simplemente para señalar una práctica de programación superior. - apsilleres

-1 para: atributos de evento + caso de cambio - realmente no deberías enseñarle a un principiante tales cosas. Por cierto, tiene un error tipográfico en su código "valor". - Christoph

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.