I need to change the class of a element onclick...

brihol44
brihol44 used Ask the Experts™
on
I would think this is fairly easy but I can't seem to get it... I just want to be able to check the checkbox and change the class of a page element when clicked.

Thanks,

Brian



<style type="text/css">
	.li_bg { width: 149px; height: 167px; padding: 5px; padding-top: 17px; margin: 5px; float:left; cursor:move; list-style:none; text-align:center; background-image:url(images/interface/image_bg_green.png); background-repeat:no-repeat;}
	.delete { width: 149px; height: 167px; padding: 5px; padding-top: 17px; margin: 5px; float:left; cursor:move; list-style:none; text-align:center; background-image:url(images/interface/image_bg_red.png); background-repeat:no-repeat;}
</style>

<cfoutput query="myQuery">
<li class="li_bg" id="i_#ID#">
<input name="delete" type="checkbox" value="1" id="i_#ID#" onclick="getElementById('i_#ID#').className='delete';getElementById('i_#ID#').className='li_bg';">
</li>
</cfoutput>

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Expert of the Quarter 2010
Expert of the Year 2010

Commented:
onclick="document.getElementByID
Expert of the Quarter 2010
Expert of the Year 2010

Commented:
<input name="delete" type="checkbox" value="1" id="i_#ID#" onclick="document.getElementById('i_#ID#').className='delete li_bg';">
onClick event of check box will pwrform the change

i.e

onClick = "document.getElementById('i#D#').className = 'new class name'"

Open in new window

Programmer
Commented:
You have three problems in your code:
1. There are two elements, the <li...> and the <input...> with the same id="i_#ID#"
id must be unique

2. In your onclick you change the class name to 'delete' then immediately change it back to the same as it was
onclick="getElementById('i_#ID#').className='delete';getElementById('i_#ID#').className='li_bg';"

3. As cyberkiwi pointed out, you need document. before getElementById

If you want to toggle the class based on whether the box is checked or not, which seems to be a reasonable thing, use the code below. I've put the javascript in a separate function to avoid cluttering the <input..> element. I also made the javascript function generic, sending the the checked/notchecked class names with the onclick, so it could be used in other places on the page. If you are using it only for this one place, you could hard code the class names into the function.

btw, Black1653, onclick should be all lower case, according to current standards.
<html>
  <head>
    <title></title>
    <style type="text/css">  
      .li_bg { width: 149px; height: 167px; padding: 5px; padding-top: 17px; margin: 5px; float:left; cursor:move; list-style:none; text-align:center; background-image:url(images/interface/image_bg_green.png); background-repeat:no-repeat;}  
      .delete { width: 149px; height: 167px; padding: 5px; padding-top: 17px; margin: 5px; float:left; cursor:move; list-style:none; text-align:center; background-image:url(images/interface/image_bg_red.png); background-repeat:no-repeat;}  
    </style>
    <script type="text/javascript">
    <!--
      function changeClassByCheck(obj,id,chkd,notchkd) {
        if (obj.checked) {
          document.getElementById(id).className=chkd;
        } else {
          document.getElementById(id).className=notchkd;
        }
      }
    //-->
    </script>
  </head>

  <body>

<cfoutput query="myQuery">
<li class="li_bg" id="i_#ID#">
<input name="delete" type="checkbox" value="1" onclick="changeClassByCheck(this,'i_#ID#','delete','li_bg');">
</li>
</cfoutput>
</body>
</html>

Open in new window

Author

Commented:
Thanks for example. I like the structure of the code. Storing the values within the function.

Brian

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial