2012-08-01 44 views
-2

嗨我已经与这太多小时现在正在struggeling。我看不出它有什么问题。问题与HTML

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

该代码应该工作(根据我),但它没有...这是我走了多远。问题可能是我的标签。为什么它不起作用? :/

斯蒂为愚蠢的职位!

+2

定义不起作用。 – Utkanos 2012-08-01 10:17:38

+0

不起作用不是错误消息,也不是问题描述。 – PeeHaa 2012-08-01 10:18:04

+0

告诉我们当你运行这个代码时究竟发生了什么 – 2012-08-01 10:18:26

回答

0

从HTML头下面输入字段将您

<script> 
... 
</script> 

document.getElementById(...)不工作“转发”,所以你的inputAinputBnull

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>