Change an input when you change another one in javascript

StackOverflow https://stackoverflow.com/questions/11740487

  •  23-06-2021
  •  | 
  •  

Question

I have two input fields.
For example: One where you type in a color and another for the code of the color.

Like this: |Green| |#008000|

I do not want to learn how to find the color-code but how to match a value or variable with another. It was just an example.

What i wanna know is how I in the best way auto generate one of the fields when I fill in the second. When I type 'green' in the first field I want the code to automatically appear in the second and vice versa. I just want to do it for a few colors. 

<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>

This is how far I've come. The problem probably is my tags. Why is it not working? :/

Was it helpful?

Solution

Try the following: Example

Basically, you need an Comparison Object, you can check against.

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

And then the according event-listener:

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

and vice versa for inputB:

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

Both have basically the same Code - the first one uses a ternary if operator instead of the classical if.

(very advanced: If you want to make it nice, wrap it in an anonymous function to protect the mapping from alteration and avoid global namespace pollution.)

OTHER TIPS

Not sure if this will help. What I could understand is, when the value of input A changes, you want to change the value of input B. If it is :

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

Check jsFiddle of how to do it. If this isn't what you want, feel free to downvote.

http://jsfiddle.net/9xeXC/

You can use the onchange event for javascript.

HTML:

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

And in the javascript functions use a switch statement to change the other input based on the value of the changed input

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
  }
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top