HTML问题[关闭]答案

【问题标题】：Problems with HTML [closed]HTML问题[关闭]
【发布时间】：2012-08-01 10:15:23
【问题描述】：

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

这里是源代码的链接：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>

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

为愚蠢的帖子道歉！

【问题讨论】：

不工作既不是错误消息也不是问题描述。
告诉我们你运行这段代码时到底发生了什么
告诉我们运行此程序时应该发生什么以及实际会发生什么。你的 JS 小提琴对我来说似乎很好用。
对不起我添加了它，也不是我的 JS 小提琴：P
您需要发布不起作用的代码，而不是来自小提琴的代码。如果问题出在您的标签中，我们需要查看它们。

标签： javascript html tags

【解决方案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>

【讨论】：

【解决方案2】：

移动你的

<script>
...
</script>

从 HTML 头部下面输入字段。 document.getElementById(...) 不能“转发”，所以你的 inputA 和 inputB 是 null。

【讨论】：