CODEWITHSUNDEEP
javascriptvariableshtmlonclick
Josh-Mason
Josh-Mason

Reputation: 319

Change div id on click

I have a few 'headlines' which, when clicked, I would like for them to expand/change colour etc. I shtere any way of changing the div on click of one of the headlines so that whichever one I click will have it's properties changed. One problem is that it will need to be a single instance...When you click on another 'headline' after clicking one previously, the one clicked before hand will need to be changed back.

So...if 'current' is the one that they have just clicked:

<script>
Function ClickedHeadline() {
   document.GetElementByID('current').style.width="auto"
   document.GetElementByID('current').style.BackgroundColor="#999"  
}
</script>

Maybe it can run a script before the one above to tell the div that has the id 'current', will change back and then run the above script...

I don't think I've explained this very well but I hope you can get what I'm trying to do. It just saves me from making a function every time I make another headline along with all the id's, It'll just get extremely confusing after a while.

Upvotes: 0

Views: 303

Answers (2)

Sam
Sam

Reputation: 2970

Javascript is case sensitive, replace with this

  function ClickedHeadline() {
   document.getElementById('current').style.width="auto";
   document.getElementById('current').style.backgroundColor="#999"; 
  }

(i advise of use always semicolon)

Upvotes: 0

daarksim
daarksim

Reputation: 221

I agree with the case sensitive and just think is better to add the objet who you want to modify like this :

 function ClickedHeadline(o) {
   o.style.width="auto";
   o.style.backgroundColor="#999"; 
  }

And in the html you just add 

onClick="ClickedHeadline(this);"

I think it's better, you can reuse the function now :) .

Upvotes: 3

Related Questions