Changing text dynamically?

[n00b0101]

Is there a way to use javascript to change/update a class depending upon a click?

For example:
INITIAL HTML

[HTML]<h1 class="superhead">TODDLER</h1>
<ul class="extended">
<li>Sneakers</li>
<li>Dress shoes</li>
<li>Tap / Ballet </li>
<li>Atheletic</li>
</ul>

<h1 class="superhead">KIDS (6 - 7)</h1>
<ul>
<li>Sneakers</li>
<li>Dress shoes</li>
<li>Tap / Ballet </li>
<li>Atheletic</li>
</ul>

<h1 class="superhead">KIDS (8 - 10)</h1>
<ul>
<li>Sneakers</li>
<li>Dress shoes</li>
<li>Tap / Ballet </li>
<li>Atheletic</li>
</ul>

<h1 class="superhead">KIDS (11 - 12)</h1>
<ul>
<li>Sneakers</li>
<li>Dress shoes</li>
<li>Tap / Ballet </li>
<li>Atheletic</li>
</ul>[/HTML]

Clicking on KIDS (6 -7) will produce:

[HTML]<h1 class="superhead">TODDLER</h1>
<ul>
<li>Sneakers</li>
<li>Dress shoes</li>
<li>Tap / Ballet </li>
<li>Atheletic</li>
</ul>

<h1 class="superhead">KIDS (6 - 7)</h1> <!-- CLICK ON H1 ELEMENT -->
<ul class="extended"> <!-- AND THE UL CLASS CHANGES FOR BOTH THIS ONE AND THE TODDLER ONE -->
<li>Sneakers</li>
<li>Dress shoes</li>
<li>Tap / Ballet </li>
<li>Atheletic</li>
</ul>

<h1 class="superhead">KIDS (8 - 10)</h1>
<ul>
<li>Sneakers</li>
<li>Dress shoes</li>
<li>Tap / Ballet </li>
<li>Atheletic</li>
</ul>

<h1 class="superhead">KIDS (11 - 12)</h1>
<ul>
<li>Sneakers</li>
<li>Dress shoes</li>
<li>Tap / Ballet </li>
<li>Atheletic</li>
</ul>[/HTML]

Then, you click on KIDS (11 - 12) and you get this:

[HTML]<h1 class="superhead">TODDLER</h1>
<ul>
<li>Sneakers</li>
<li>Dress shoes</li>
<li>Tap / Ballet </li>
<li>Atheletic</li>
</ul>

<h1 class="superhead">KIDS (6 - 7)</h1>
<ul>
<li>Sneakers</li>
<li>Dress shoes</li>
<li>Tap / Ballet </li>
<li>Atheletic</li>
</ul>

<h1 class="superhead">KIDS (8 - 10)</h1>
<ul>
<li>Sneakers</li>
<li>Dress shoes</li>
<li>Tap / Ballet </li>
<li>Atheletic</li>
</ul>

<h1 class="superhead">KIDS (11 - 12)</h1>
<ul class="extended">
<li>Sneakers</li>
<li>Dress shoes</li>
<li>Tap / Ballet </li>
<li>Atheletic</li>
</ul>[/HTML]

...... and so on.

[phvfl]

Hi,

Welcome to TSDN,

You can change the class of an object by changing the className property of an object, for example if you had a variable called "$obj" you could change its class to "class1" as such:

$obj.className = 'class1';
 

There are two main ways of selecting elements through DOM getElementById and getElementsByTagName, if there is an element that you know you will want to access through Javascript giving it an ID will let you select it directly:

<p id="p1">This is a paragraph</p>
 

If there was a paragraph in your document as above you could select it with:

var $obj = document.getElementById("p1");
 

Using the code above to change the class name the HTML would be changed to:

<p id="p1" class="class1">This is a paragraph</p>
 

You could select all paragraphs in a document using the other method mentioned:

var $obj = document.getElementsByTagName("p");
 

In this case an array of the paragraph elements would be returned.

This covers how you could change the class, you are wanting to have this happen when a heading is clicked. There are a few ways to achieve this, I will mention two.

Firstly you could hard code the action using the onclick tag of the HTML:

<p id="p1" onclick="alert('hello');">This is will say hello when clicked.</p>
 

The text in the onclick attribute is the javascript to be executed. For anything of any substance it is tidier to use a function defined in the header or from an external file.

function sayHello(){
  alert("hello");
}
 

<p id="p1" onclick="sayHello();">This is will say hello when clicked.</p>
 

The second, cleaner way of adding the event to the element is to use the onclick property. Select the required element as previously and then set the onclick property to the function:

function sayHello(){
  alert("hello");
}
 
var $obj = document.getElementById("p1");
$obj.onclick = function(){
sayHello();
};
 

The only thing that would then be required would be to make sure that the javascript that set the onclick property executed once the document had loaded, otherwise the element being selected may not exist when the script executes. The best way to do this is to but the wiring of the events into a function that is called once the document is loaded, using the window.onload property:

function sayHello(){
  alert("hello");
}
 
function wireup(){
var $obj = document.getElementById("p1");
$obj.onclick = function(){sayHello();};
}
 
window.onload = function(){wireup();}
 

This may seem like a lot of work but it can save you a lot of code, for example if you wanted to execute the sayHello function when any paragraph was clicked you could change the wireup function slightly to:

function wireup(){
var $obj = document.getElementsByTagName("p");
  for(var i=0; i<$obj.length;i++){
    $obj[i].onclick = function(){sayHello();};
  }
}
 

If you had multiple elements that you wanted to be wired up to the same function you could do this with much less code this way.

I appreciate that I have not been specific to your example, but I have given a brief overview of all of the properties and methods that you would need to do what you want. Please have a go, if you have any questions about what I have written please let me know and I will help. If you have a try and have problems please post your attempted code .