View Full Version : getElementById question - Please help

12-01-2009, 10:11 PM
Hi Everybody,

I'd be grateful if you could help me out. I need to change the CSS by changing the id when a link is clicked.
The id is in the body tag and by default it is named 'first'. i.e
<body id="first">.
If I click on the link named 'Change id to Second', this should change to <body id="Second">.
If I further click on the link named "Change id to Second" this should change to
<body id="Third">.

My code below works (I have stripped this down to make sense), but only when I click one of the links for the first time. If I am to click the second/ third link, nothing happens:

<script type="text/javascript">
function changeFirst() {
document.getElementById('blanky').id = 'first';
document.getElementById('second').id = 'first';
document.getElementById('third').id = 'first';
function changeSecond() {
document.getElementById('blanky').id = 'second';
document.getElementById('first').id = 'second';
document.getElementById('third').id = 'second';
function changeThird() {
document.getElementById('blanky').id = 'third';
document.getElementById('first').id = 'third';
document.getElementById('second').id = 'third';
<body id=first><!-- I need to change this id -->
<p>Hello, the id above should change when the following links are clicked</p>
<a onclick="changeFirst()">Change id to First</a>
<a onclick="changeSecond()">Change id to Second</a>
<a onclick="changeThird()">Change id to Third</a>

Any help will be greatly appreciated.


12-01-2009, 10:35 PM
Some kind soul on another forum answered this for me:

<a href="#" onclick="changebodyid('theId');">your link</a>
function changebodyid(theid) {
document.body.id = theid;