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

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

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:



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

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

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.

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:



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