-2

嗨，我已经为此挣扎了太多小时了。我看不出它有什么问题。

这是源代码的链接：jsfiddle.net/jPPjr/7

我不想要这个小盒子，所以我从代码中删除了它。

当我输入一个字段时，另一个应该更改其值，反之亦然。但是当我输入绿色时，什么也没有发生。它在 jsfiddle 中对我有用，但当我把它放在 php 文件中并使用我自己的标签时就不行了。

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

代码应该可以工作（根据我），但它没有......这就是我已经走了多远。问题可能是我的标签。为什么它不起作用？：/

为愚蠢的帖子道歉！

4

2 回答 2

1

您的脚本将在页面完全加载之前执行，因此 yu 应该使其仅在页面完全加载后执行。像这样：

<html>
<head>
  <script type="text/javascript">
  onload = function() { //wrap your code with this

    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>
于 2012-08-01T10:37:47.160 回答
0

移动你的

<script>
...
</script>

从输入字段下方的 HTML 头部。document.getElementById(...)不能“向前”工作，所以你的inputAandinputB是null.

于 2012-08-01T10:29:04.463 回答