Change an input when you change another one in javascript

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

  •  23-06-2021
  •  | 
  •  

문제

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? :/

도움이 되었습니까?

해결책

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

다른 팁

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
  }
}
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top