javascript id change onclick function

Question

So I got a 3 x 3 table wich looks like this:

<table align=left width="896px" class="tableCategories">
<tr class="trCategories">
    <td class="tdCategories"><input type="button" id="P11" onclick="clickE()" value="E" /></td>
    <td class="tdCategories"><input type="button" id="P12" onclick="clickS()" value="S" /></td>
    <td class="tdCategories"><input type="button" id="P13" onclick="clickB()" value="B" /></td>
....

I just want that if the user clicks on one of the nine boxes all of the boxes changes their background images and the box which was clicked changes itself to a back button which references to the first 9 images. Like a submenu getting opened if one of the boxes being clicked.

So I tried it in my way but it does not work very well. If I click on one of the boxes it triggers both actions which is connected via id. So my thought was to change the id to, but then I thought maybe there is a smarter way to do that. So I wrote my problem here :D

Edit:

The javascript part is looking like this for every of the functions:

function clickE()
        {
            document.getElementById("P11").value = "Zurück";
            document.getElementById("P11").onclick = clickBack;

            document.getElementById("P12").value = "Restaurant";
            document.getElementById("P12").onclick =clickCategory("restaurant");

            document.getElementById("P13").value = "Imbiss";
            document.getElementById("P13").onclick =clickCategory("imbiss");

            document.getElementById("P21").value = "Bäckerei";
            document.getElementById("P21").onclick =clickCategory("baeckerei");

            document.getElementById("P22").value = "Fast Food";
            document.getElementById("P22").onclick =clickCategory("fast_food");

            document.getElementById("P23").value = "Süßes";
            document.getElementById("P23").onclick =clickCategory("suesses");

            document.getElementById("P31").value = "Cafe";
            document.getElementById("P31").onclick =clickCategory("cafe");

            document.getElementById("P32").value = "Bar";
            document.getElementById("P32").onclick =clickCategory("bar");

            document.getElementById("P33").value = "Kneipe";
            document.getElementById("P33").onclick =clickCategory("kneipe");

        }

I try it first with the labels because I think it will work with images the same way.

Can you show your javascript as well please?

twoleggedhorse
– twoleggedhorse

2013-03-23 02:54:44 +00:00
Commented Mar 23, 2013 at 2:54 — twoleggedhorse
– twoleggedhorse, Commented Mar 23, 2013 at 2:54
I think its a problem of the data structure I try to model

Kingalione
– Kingalione

2013-03-23 03:00:08 +00:00
Commented Mar 23, 2013 at 3:00 — Kingalione
– Kingalione, Commented Mar 23, 2013 at 3:00
you have to quote the onclick

Thomas Lai
– Thomas Lai

2013-03-23 03:25:50 +00:00
Commented Mar 23, 2013 at 3:25 — Thomas Lai
– Thomas Lai, Commented Mar 23, 2013 at 3:25
can you create a demo at jsfiddle.net

Arun P Johny
– Arun P Johny

2013-03-23 03:49:16 +00:00
Commented Mar 23, 2013 at 3:49 — Arun P Johny
– Arun P Johny, Commented Mar 23, 2013 at 3:49

bphillips · Accepted Answer · 2013-03-23 06:08:15Z

Being unsure of the long term application, I may have a starting point. The initial script provided could get a bit unwieldy if you ever want to extend, so there is now a "defineElements" method that could be used to configure your elements. Please note that argument paramaters have been added to the onclick event in the html as well.

The "defineElements" function returns an associative array object (eg key/value pairs), with each key being named after the html element id. The value of each key is also an associative array that contains the element id (eid), label (lbl) and event (evnt).

Short story long... when you click a button, the label for each button is changed and the appropriate click handler is assigned. If you click the button labeled "Back", the default click handler is reassigned to all.

This would also be an excellent candidate for jQuery if that is available to you.

Hopefully this will get you moving in the right direction:

HTML

<table>
<tr class="trCategories">
    <tr class="trCategories">
    <td class="tdCategories"><input type="button" id="P11" onclick="clickE(this.id)" value="E" /></td>
    <td class="tdCategories"><input type="button" id="P12" onclick="clickS(this.id)" value="S" /></td>
    <td class="tdCategories"><input type="button" id="P13" onclick="clickB(this.id)" value="B" /></td>
</tr>
</table>

== And the Javascript

function clickE(id){
  var elementDef = defineElements(id);

  for(var key in elementDef){
    var propObj = elementDef[key];
    //console.log(propObj);
    document.getElementById(propObj.eid).value = propObj.lbl;
    if(id == undefined)
    document.getElementById(propObj.eid).onclick = function(){ clickE(this.id);}     //--reassign default event
    else
    document.getElementById(propObj.eid).onclick = propObj.evnt;
  }
}


function defineElements(id){
   var elementArr = ['P11','P12','P13']; //--add your element id's to this array to extend, and then add a case for each within switch below
   var definitionObj = {};

   for(var i = 0; i < elementArr.length; i++){
     switch(elementArr[i].toUpperCase()){
       case 'P11':
          definitionObj[elementArr[i].toUpperCase()] = { eid:elementArr[i].toUpperCase(), lbl:'Zuruck', evnt: function(){ clickCategory.call(this, "whatever"); } };
       break;
       case 'P12':
          definitionObj[elementArr[i].toUpperCase()] = { eid:elementArr[i].toUpperCase(), lbl:'Restaurant', evnt: function(){ clickCategory.call(this,"restaurant"); } };
       break;
       case 'P13':
          definitionObj[elementArr[i].toUpperCase()] = { eid:elementArr[i].toUpperCase(), lbl:'Imbiss', evnt: function(){ clickCategory.call(this,"imbiss"); } };
       break;
     }
   }

   if(id != undefined){  
    definitionObj[id]['evnt'] = function(){ clickBack.call(this); } //--assign the clickback function to the selected element based on id paramater
    definitionObj[id]['lbl'] = 'Back';
   }

   return definitionObj;
}

function clickCategory(cat){
  alert(cat);
}

function  clickBack(){
  clickE();
}

Your comment helped me to find this tutorial w3schools.com/js/js_htmldom_events.asp Thanks a lot :D
After the tutorial I understand your code much better now. I will post my solutions if it works perfectly.

Collectives™ on Stack Overflow

javascript id change onclick function

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related