CODEWITHSUNDEEP
javascripthtml
Fac3Value
Fac3Value

Reputation: 61

Can't Change the innerHTML of a Table Cell

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

Upvotes: 1

Views: 7119

Answers (4)

Achintha Samindika
Achintha Samindika

Reputation: 1954

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.net/C26MN/

Upvotes: 0

kmas
kmas

Reputation: 6439

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>

Upvotes: 1

Alex Marinov
Alex Marinov

Reputation: 191

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

Upvotes: 0

11684
11684

Reputation: 7517

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>";

Upvotes: 4

Related Questions