CODEWITHSUNDEEP
javascriptdom-events
akamerc
akamerc

Reputation: 29

Image to function with JavaScript button

I'll explain it best I can. I have the buttons (Red Ones Right side) in JavaScript so when I click on each one they turn green and when I click them again they turn red. I'm trying to get the image button (Left side) to work where if I click each one it will turn the JavaScript buttons (Red Ones Right side). Meaning I can use either one to enable/disable.

Here is image:

Image for buttons

Html code:

 <img src="images/menuIcons/skip.gif" width="126" height="34" />
    <div align="center" style="margin-bottom: 10px; margin-left: 10px;">
      <button id="skip" class="red" onclick="controls(this.getAttribute('class'),this.id)"></button>

<img src="images/menuIcons/text.gif" width="126" height="34" />
        <div align="center" style="margin-bottom: 10px; margin-left: 10px;">
          <button id="text" class="red" onclick="controls(this.getAttribute('class'),this.id)"></button>

<img src="images/menuIcons/message.gif" width="126" height="34" />
    <div align="center" style="margin-bottom: 10px; margin-left: 10px;">
      <button id="message" class="red" onclick="controls(this.getAttribute('class'),this.id)"></button>

<img src="images/menuIcons/game.gif" width="126" height="34" />
        <div align="center" style="margin-bottom: 10px; margin-left: 10px;">
          <button id="game" class="red" onclick="controls(this.getAttribute('class'),this.id)"></button>

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

Upvotes: 1

Views: 807

Answers (2)

KooiInc
KooiInc

Reputation: 122906

It's all a bit complex. You could surround your menu with a container and use event delegation to add a click handler for all items. Here is a (plain javascript) jsfiddle mockup for your menu.

Some notes on your html/code:

  • don't use inline styling or javascript. Inline javascript spawns a new interpreter on execution.
  • In your html you have more than one element with the same id, that's asking for trouble. id's should be unique.
  • Maybe you should check jQuery, it can save you work.

Upvotes: 0

Bergi
Bergi

Reputation: 664548

You can just call the function from an onclick on the image, too. However, I would recommend to restructure the controls function to take only the id as an argument then.

<img src="images/menuIcons/skip.gif" onclick="controls('skip')" width="126" height="34" />
...
<button id="skip" class="red" onclick="controls(this.id)"></button>
<!-- the other elements analogous -->

// enable / disable Buttons
function controls(elemid) {
    var elem = document.getElementById(elemid);
    if (elem.className == "red") {
        elem.setAttribute('class', 'green');
        // You can define your enable statements here
    } else {
        elem.setAttribute('class', 'red');
        // You can define your disables statements here        
    }
}

Upvotes: 1

Related Questions