2012-08-01 42 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>