Home/ Questions/Q 6894841
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T06:49:58+00:00

I am trying to create a javascript function within my html document that essentially

  • 0

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

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