Dynamically add variables to html table

Question

I've created a table here with html.

<tr id='addr0'>
    <td>1</td>
    <td>
        <input type="text" id='word0' placeholder='Word' 
               value="Abhor" class="form-control" />
    </td>
    <td>
        <input type="text" id='definition0' placeholder='Definition' 
               value="regard with disgust and hatred." class="form-control" />
    </td>
    <td>
        <input type="text" id='synonym0' placeholder='Synonyms' 
               value="detest, hate" class="form-control" />
    </td>
</tr>
<tr id='addr1'></tr>

How can I use java script to add an array or variables in the text areas. I looked around and none of the code I found worked.

this is what i've tried:

<script>
    document.getElementById("synonym0").innerHTML = "Test";
</script>

I created a table with this as a row. I want to use javascript to add elements in there I tried document.getElementByID but nothing was showing. — QWERTY539, Apr 25 '15 at 17:01

score 1 · Answer 1 · answered Apr 25 '15 at 17:07

1

input elements' content is accessed by their value attribute, not innerHtml. try:

document.getElementById("synonym0").value = "Test";

answered Apr 25 '15 at 17:07

Banana

7,424
3
22
43

I saw that on the site but for some reason it didn't work the way I used it. Now it works, Thank you very much I'm just starting out on web development. – QWERTY539 Apr 25 '15 at 17:12

score 0 · Answer 2 · edited May 23 '17 at 12:22

I think your question is answered here: How to change the Content of a <textarea> with Javascript

but here is an snippet anyway:

// to set the content to a variable (an string):

document.getElementById('word0').value = 'Testing!';

var arr = ['member 1', 'member 2', 'member 3'];

// To set the content to an array:

document.getElementById('definition0').value = arr.toString();

<tr id='addr0'>
    <td>1</td>
    <td>
        <input type="text" id='word0' placeholder='Word' value="Value" class="form-control" />
    </td>
    <td>
        <input type="text" id='definition0' placeholder='Definition' value="Default value" class="form-control" />
    </td>

</tr>
<tr id='addr1'></tr>

Dynamically add variables to html table

2 Answers2