I've been having trouble trying to use .innerHTML to change the text inside of table cells. I want to change the plain text in the cell to a link when one of the radio buttons that I've created is checked. The relevant code is below:

HTML:

 ...<td id="header1" style="width: 80px; text-align:center">Column 1</th>... 


 <div id="testButtons">
        <input type="radio" name="on/off" onclick="showLinks()" value="off" id="off" checked="">
            <label for="off">Function Off</label> 
        <input type="radio" name="on/off" onclick="showLinks()" value="on" id="on">
            <label for="on">Function On</label>
 </div>

And Javascript:

function showLinks(){ 
if(document.getElementById("on").checked){
    document.getElementById("header1").innerHTML("<a id='headerLink1' href='#' onclick='selectColumn()'>Column 1</a>");
}

}

When I test it, I get this error: Uncaught TypeError: Property 'innerHTML' of object #HTMLTableCellElement is not a function.

I don't know why, because it seems like this should work, at least according to MSDN ("However, to change the content of a particular cell, you can use innerHTML.").

Any help would be appreciated, Thanks

I've been having trouble trying to use .innerHTML to change the text inside of table cells. I want to change the plain text in the cell to a link when one of the radio buttons that I've created is checked. The relevant code is below:

HTML:

 ...<td id="header1" style="width: 80px; text-align:center">Column 1</th>... 


 <div id="testButtons">
        <input type="radio" name="on/off" onclick="showLinks()" value="off" id="off" checked="">
            <label for="off">Function Off</label> 
        <input type="radio" name="on/off" onclick="showLinks()" value="on" id="on">
            <label for="on">Function On</label>
 </div>

And Javascript:

function showLinks(){ 
if(document.getElementById("on").checked){
    document.getElementById("header1").innerHTML("<a id='headerLink1' href='#' onclick='selectColumn()'>Column 1</a>");
}

}

When I test it, I get this error: Uncaught TypeError: Property 'innerHTML' of object #HTMLTableCellElement is not a function.

I don't know why, because it seems like this should work, at least according to MSDN ("However, to change the content of a particular cell, you can use innerHTML.").

Any help would be appreciated, Thanks

• javascript
• html

Share Improve this question Follow asked Jun 26, 2013 at 13:56 Fac3ValueFac3Value 6111 silver badge22 bronze badges 3

• 1 And is not a _function means nothing to you? It's an attribute, so don't use it as if it were a function ... – C3roe Commented Jun 26, 2013 at 13:58
• 1 You also have an error in your HTML: you open a <td> but close it with </th>. – Aleks G Commented Jun 26, 2013 at 14:03
• 1 Please stop embedding "onclick" tags in your html. robertnyman./2008/11/20/… – Incognito Commented Jun 26, 2013 at 14:06

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

innerHTML is not a method but a DOM attribute (officially called a DOMString). You should do:

document.getElementById("header1").innerHTML = "<a id='headerLink1' href='#' onclick='selectColumn()'>Column 1</a>";

You've forgot to close your < td >.

It may also be your problem.

<td id="header1" style="width: 80px; text-align:center">Column 1 </td></th>

document.getElementById("header1").innerHTML(" href='#' onclick='selectColumn()'>Column 1");

This is not valid because innerHTML is not a method. You should set its value like this:

document.getElementById("header1").innerHTML = some value

I have changed the onclick to onchange and fix some html mistakes.

<table>
<td id="header1" style="width: 80px; text-align:center">Column 1</td>
</table>

 <div id="testButtons">
     <input type="radio" name="onoff" onchange="showLinks()" value="off" id="off" checked="" />
            <label for="off">Function Off</label> 
     <input type="radio" name="onoff" onchange="showLinks()" value="on" id="on" />
            <label for="on">Function On</label>
 </div>

<script>
function showLinks(){ 
   if(document.getElementById("on").checked){
        document.getElementById("header1").innerHTML ="<a id='headerLink1' href='#' onclick='selectColumn()'>Column 1</a>";
    }
}
</script>

here the fiddle http://jsfiddle/C26MN/