-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

スクリプトはページが完全に読み込まれる前に実行されるため、ページが完全に読み込まれた後にのみスクリプトを実行する必要があります。このような：

<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(...)「フォワード」では機能しないので、あなたinputAとinputBはnullです。

于 2012-08-01T10:29:04.463 に答える