divsの表示入力が機能しない

Question

入力に基づいてdivを生成しようとしています。 http://jsfiddle.net/2ufnK/2/でうまく動作しましたが、http://communitychessclub.com/cccr-pairing/test.htmlで実装したときにうまく動作しませんでした。

<div id="WD01"></div> 
<div id="BD01"></div> 
<div id="WD02"></div> 
<div id="BD02"></div> 

...の値を表示するためのHTML

<script> 
function screen_W01(){var x = document.getElementById("W01"); var div = document.getElementById('WD01'); div.innerHTML = x.value;} 
function screen_B01(){var x = document.getElementById("B01"); var div = document.getElementById('BD01'); div.innerHTML = x.value;} 

function screen_W02(){var x = document.getElementById("W02"); var div = document.getElementById('WD02'); div.innerHTML = x.value;} 
function screen_B02(){var x = document.getElementById("B02"); var div = document.getElementById('BD02'); div.innerHTML = x.value;} 
</script> 

しかし、それだけでは動作しません：私はなぜ...

<div class = "ui-widget white"><input id = "W01" name = "w01" type = "text" onchange="screen_W01()" class = "automplete-2" autofocus></div> 
<div class = "ui-widget black"><input id = "B01" name = "b01" type = "text" onchange="screen_B01()" class = "automplete-2" ></div><br /> 
<div class = "ui-widget white"><input id = "W02" name = "w02" type = "text" onchange="screen_W02()" class = "automplete-2"></div> 
<div class = "ui-widget black"><input id = "B02" name = "b02" type = "text" onchange="screen_B02()" class = "automplete-2"></div><br /> 

との不思議値が上がりません」表示されます。誰かが良い方法を提案する（jqueryが優先）か、コーディングエラーを修正できますか？

Answer 1

すべての入力と対応するdivに1つの関数を使用することをお勧めします。

それは、ターゲットのid.

$(".ui-widget input").on("change", function(){ 
    var inputID = $(this).attr("id"); // Ex: W01 

    // Add the "D" 
    var divID = inputID.substr(0,1)+"D"+inputID.substr(1); // Ex: W + D + 01 
    console.log(inputID); 

    var inputValue = $(this).val(); 
    $(document).find("#"+divID).html(inputValue); 
}); 

を控除する入力idの「文字列操作」を使用して、入力のためのマークアップは、（単に「のonchange = ...」を削除）になり

<div class = "ui-widget white"> 
    <input id = "W01" name = "w01" type = "text" class = "automplete-2" autofocus> 
</div> 

Answer 2

私はこれで離れるかもしれません。私はこれのすべてにかなり新しいです。私はあなたが両方のための

<div class = "ui-widget white"><input id = "W01" name = "w01" type = "text" onchange="screen_W01()" class = "automplete-2" autofocus></div> 

と

function screen_W01(){var x = document.getElementById("W01"); var div = document.getElementById('WD01'); div.innerHTML = x.value;} 

どこid = "W01"を持っていますが、あなたのHTML値にあなたがid="WD01"を持って

<div id="WD01"></div> 

を持って見ています。これがうまくいかない理由かもしれませんか？すべてのHTML値に「D」が追加されています。それがここにあるものに基づいて私が見ることができる唯一のものです。