javascript - display input in divs doesn't work -
i trying populate divs based on input. works fine (i tried it.) @ http://jsfiddle.net/2ufnk/2/ when implemented @ http://communitychessclub.com/cccr-pairing/test.html didn't work. wonder why...
<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 />
and:
<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>
the html display values...
<div id="wd01"></div> <div id="bd01"></div> <div id="wd02"></div> <div id="bd02"></div>
but doesn't work: values aren't displayed. can suggest better way (jquery preferred) or correct coding error?
i suggest using 1 function inputs , corresponding divs.
it uses "string manipulation" on input id
deduct target's id.
$(".ui-widget input").on("change", function(){ var inputid = $(this).attr("id"); // ex: w01 // add "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); });
and markup inputs (just remove "onchange=...")
<div class = "ui-widget white"> <input id = "w01" name = "w01" type = "text" class = "automplete-2" autofocus> </div>
Comments
Post a Comment