Question

我正在尝试根据输入填充div。它在http://jsfiddle.net/2ufnK/2/处理得很好（我试过了。）但是当我在http://communitychessclub.com/cccr-pairing/test.html实现它时，它没有用。我想知道为什么......

<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 />

和

<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>

HTML显示值...

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

但它不起作用：没有显示数值。有人可以提出更好的方法（jquery首选）或纠正我的编码错误吗？

Answer 1

我建议对所有输入和相应的div使用ONE函数。

它在输入id上使用“字符串操作”来扣除目标的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);
});

输入的标记是（只需删除“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值为

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

有id="WD01"。这可能是它不起作用的原因吗？所有HTML值都添加了“D”。根据这里的内容，这是我唯一可以看到的东西。

div中的显示输入不起作用

2 个答案: