trouble adding value of <td> to text box onclick
Question
I am trying to create a javascript function within my html document that essentially takes the value of each <td> and places it in the textbox. Any help is very appreciated.
<html>
<head>
<script type="text/javascript">
function typeThis(){
document.getElementById('box_1').value = document.getElementById('typewriter');
}
</script>
<style type="text/css">
td{
border:1px solid black;
padding:10px 10px 10px 10px;
font-family:"Helvetica Neue";
font-size:20px;
}
table{
margin-top:50px;
}
</style>
</head>
<body>
<table id = "typewriter">
<td value="k" onclick="typeThis();">k</td>
<td value="c" onclick="typeThis();">c</td>
<td value="y" onclick="typeThis();">y</td>
<td value="s" onclick="typeThis();">s</td>
<td value="p" onclick="typeThis();">p</td>
<input type="text" id="box_1">
</table>
</body>
</html>
3 answers
solution1
1 2011-12-05 22:41:23
How about
var box = document.getElementById("box_1");
var tds = document.getElementsByTagName("td");
for (var i = 0; i < tds.length; i++) {
var valToAdd = tds[i].textContent ? tds[i].textContent :
(tds[i].innerText ? tds[i].innerText : tds[i].innerHTML);
box.value = box.value + valToAdd;
}
to avoid using innerHTML it checks for the newer textContent and uses it if present. If not, it falls back to innerText and, as a last resort, innerHTML.
Also, if you want to add custom attributes to your td tags, you may want to opt for the more standard data-value="k" format. And check your code for a closing table tag
solution2
1 ACCPTED 2011-12-05 22:43:04
value is a custom property for a td,
so you can access it using this method
function typeThis(){
document.getElementById('box_1').value = this.getAttribute("value");
}
Side Note: this is how your table should look like
<table id = "typewriter">
<tr>
<td value="k" onclick="typeThis();">k</td>
<td value="c" onclick="typeThis();">c</td>
<td value="y" onclick="typeThis();">y</td>
<td value="s" onclick="typeThis();">s</td>
<td value="p" onclick="typeThis();">p</td>
</tr>
</table>
<input type="text" id="box_1">
Example 2:
function typeThis(letter){
document.getElementById('box_1').value = letter;
}
<table id = "typewriter">
<tr>
<td value="k" onclick="typeThis('k');">k</td>
<td value="c" onclick="typeThis('c');">c</td>
<td value="y" onclick="typeThis('y');">y</td>
<td value="s" onclick="typeThis('s');">s</td>
<td value="p" onclick="typeThis('p');">p</td>
</tr>
</table>
solution3
0 2011-12-05 23:06:47
The main problem is on this line:
document.getElementById('box_1').value = document.getElementById('typewriter');
You are assigning the value of the 'box_1' input equal to the table element itself, not to the value from the particular td that was clicked.
If you change your function to accept a parameter that is the clicked td you can then access the value property:
function typeThis(el){
document.getElementById('box_1').value = el.getAttribute('value');
}
// then change each TD to look like this:
<td value="k" onclick="typeThis(this);">k</td>
However, you can simplify your code somewhat if you use a single click handler on the table instead of putting one on every individual td. When a td is clicked that event "bubbles up" to the containing tr and then to the table, so you handle it there and check the event object to see which td was the actual target:
function typeThis(e) {
// allow for the way IE handles the event object
// compared to other browsers
e = e || window.event;
var el = e.srcElement || e.target;
if (el.tagName.toLowerCase() === "td")
document.getElementById('box_1').value = el.getAttribute('value');
}
document.getElementById('typewriter').onclick = typeThis;
Regarding your table html, some browsers may guess what you meant and display it OK, but you should have a closing </table> tag and your tds should be in a tr. Note that I've removed all of the onclick assignments because with the code above that assigns one for the table you don't need them:
<table id="typewriter">
<tr>
<td value="k">k</td>
<td value="c">c</td>
<td value="y">y</td>
<td value="s">s</td>
<td value="p">p</td>
</tr>
<table>
Note that at the moment each td's value is exactly the same as its innerHTML, so you could just remove all of the value properties from the markup and user .innerHTML in your function instead of getting the value of value :
document.getElementById('box_1').value = el.innerHTML;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.