Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Mar 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Trying to get button to function

    What I need:


    Html code:
    Code:
    <div id="leftMenuButtons">
    	<table width="50%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="63%"><div align="center"><img id="Skip class="red" src="images/menuIcons/skip.gif" width="58" height="30" vspace="5" onclick="cracksmoke(this.getAttribute('class'),this.id)"></div></td>
        <td width="37%"><div align="center" style="margin-bottom: 10px; margin-left: 10px;">
          <button id="Skip" class="red" onclick="controls(this.getAttribute('class'),this.id)"></button>
        </div></td>
      </tr>
      <tr>
        <td><div align="center"><img src="images/menuIcons/text.gif" width="71" height="28" vspace="5"   /></div></td>
        <td><div align="center" style="margin-bottom: 10px; margin-left: 10px;">
          <button id="Text" class="red" onclick="controls(this.getAttribute('class'),this.id)"> </button></td>
      </tr>
      <tr>
        <td><div align="center"><img src="images/menuIcons/game.gif" width="181" height="36" /></div></td>
        <td><div align="center" style="margin-bottom: 10px; margin-left: 10px;">
          <button id="Game" class="red" onclick="controls(this.getAttribute('class'),this.id)"> </button></td>
      </tr>
      <tr>
        <td><div align="center"><img src="images/menuIcons/message.gif" width="126" height="34" /></div></td>
        <td><div align="center" style="margin-bottom: 10px; margin-left: 10px;">
          <button id="Message" class="red" onclick="controls(this.getAttribute('class'),this.id)"> </button></td>
      </tr>
    </table>
    	</div>
    <!-- end #leftMenu --></div>
      <div id="rightMenu">
        <div id="rightMenuButtons">
    	<table width="50%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="63%"><div align="center"><a href="url=&quot;itms-apps://ax.itunes.apple.com/WebObjects/MZStore.woa/wa/viewContentsUserReviews?type=Purple+Software&amp;id=524474521&quot;"><img src="images/menuIcons/review.gif" width="211" height="39" border="0" /></a></div></td>
        <td width="37%">
          <button style="margin:2px; margin-top: 30px;" id="Review" class="red" onclick="controls(this.getAttribute('class'),this.id)"></button>
        </td>
      </tr>
      <tr>
        <td><div align="center"><a href="http://www.nimbusgames.com/help/&quot;"><img src="images/menuIcons/extras.gif" width="99" height="34" border="0" /></a></div></td>
        <td>
          <button style="margin: -3px; margin-top: 20px;" id="Extras" class="red" onclick="controls(this.getAttribute('class'),this.id)"></button></td>
      </tr>
      <tr>
        <td><div align="center"><img src="images/menuIcons/sync.gif" width="183" height="36" /></div></td>
        <td>
          <button style="margin: -7px; margin-top: 10px;" id="Snyc" class="red" onclick="controls(this.getAttribute('class'),this.id)"></button></td>
      </tr>
      <tr>
        <td><div align="center"> <a href="javascript:ModalPopupsConfirm();"><img src="images/menuIcons/restart.gif" width="111" height="33" border="0"/></a></div></td>
        <td>
          <button style="margin: -10px; margin-top: 15px;" id="Restart" class="red" onclick="controls(this.getAttribute('class'),this.id)"></button></td>
      </tr>
    </table>
    Javascript code:
    Code:
    // enable / disable Buttons
    function controls(className,elem) {
        if (className == "red") {
            document.getElementById(elem).setAttribute('class','green');
            // You can define your enable statements here
        } else {
            document.getElementById(elem).setAttribute('class','red');
            // You can define your disables statements here        
        }
    }

  • #2
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    It is preferable to set the className property rather than using 'setAttribute' and, given this, it is not sensible to use 'className' as your parameter's name:

    Code:
    // enable / disable Buttons
    function controls(clsName, elem) {
        if (clsName== "red") {
            document.getElementById(elem).className = 'green';
            // You can define your enable statements here
        } else {
            document.getElementById(elem).className = 'red';
            // You can define your disables statements here        
        }
    }
    
    // similarly..
    onclick="controls(this.className, this.id)"
    But I'm not sure if this accounts for it not working - test and see.

    BTW Where do people drag up such old code? 'align' is long deprecated, as is the use of 'javascript:'.

    Edited: Your code works for me so I'm not sure what the issue is..?
    Last edited by AndrewGSW; 08-04-2012 at 09:41 PM.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #3
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,993
    Thanks
    15
    Thanked 233 Times in 233 Posts
    I'd just use the 'this' functionality.

    onclick="myfunction(this);"

    if you want to make changes in the caller of the function.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •