How can I consolidate duplicated javascript functions?

Question

I have a site to allow someone to place food orders. Images of potential ingredients (determined by a MySQL query) can be clicked to add or remove them, and the image will toggle on each click.

The problem I'm having is for each new item I am having to duplicate the function and just change the variable names for each new function. I'm sure there must be a way to simplify to dynamically apply to all of the ingredients without all of the redundant code. Here is the code just for two. There are dozens. Any suggestions would be appreciated.

window.onload = function () {
    var ProductElement = document.getElementById('Ketchup');
    if (ProductElement != null) {
        Ketchupobj = document.getElementById('Ketchup')
        document.getElementById('Ketchuptogg').onclick = function () {
            Ketchuptoggle();
        }
    }

    var ProductElement = document.getElementById('Mustard');
    if (ProductElement != null) {
        Mustardobj = document.getElementById('Mustard')
        document.getElementById('Mustardtogg').onclick = function () {
            Mustardtoggle();
        }
    }
}

function Ketchuptoggle() {
    if (Ketchuptggle == 'on') {
        Ketchupobj.src = "Ketchup.jpg";
        Ketchuptggle = 'off';
    } else {
        Ketchupobj.src = "noKetchup.jpg";
        Ketchuptggle = 'on';
    }
}

function Mustardtoggle() {
    if (Mustardtggle == 'on') {
        Mustardobj.src = "Mustard.jpg";
        Mustardtggle = 'off';
    } else {
        Mustardobj.src = "noMustard.jpg";
        Mustardtggle = 'on';
    }
}


<table class="ing">
<tr>
<?php

for ($x=0; $x<5 AND $row = mysql_fetch_row($result);$x++ ) {
$caps=$row[1];
$caps=strtoupper($caps);
echo <<<image
<td><b>$caps</b><br>
<a id="$row[0]" class="toggle" href="#"><img id="$row[0]img" class="toggimg" 
src="$row[0].jpg" style="border-style: none" alt=""/></a>
</td>
image;
}
echo"</tr></table>";

please add a piece of your html code.

Claudio Santos
– Claudio Santos

2013-10-25 22:28:43 +00:00
Commented Oct 25, 2013 at 22:28 — Claudio Santos
– Claudio Santos, Commented Oct 25, 2013 at 22:28
html (produced dynamically via php) added as requested.

Ryan
– Ryan

2013-10-27 18:43:18 +00:00
Commented Oct 27, 2013 at 18:43 — Ryan
– Ryan, Commented Oct 27, 2013 at 18:43

Oriol · Accepted Answer · 2013-10-25 23:02:04Z

1

Implicit this is your friend:

var toggles = document.getElementsByClassName('toggle');
for (var i=0; i<toggles.length; i++) {
  toggles[i].isOn = true;
  toggles[i].onclick = function(ev){
     var condiment = this.id;
     this.isOn = !this.isOn;
     document.getElementById(condiment+'img').src=(this.isOn?'':'no')+condiment+'.png';
   };
 }

edited Oct 25, 2013 at 23:02

Oriol

291k71 gold badges459 silver badges535 bronze badges

answered Oct 25, 2013 at 22:42

dspeyer

3,0561 gold badge20 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Oriol Over a year ago

Well done +1. But it could be optimized declaring the event handler outside the loop, because at each iteration you are creating a new function which is identical to the others.

Ryan Over a year ago

Worked beautifully. I literally just eliminated hundreds of lines of repetitive code. I'm only about two weeks into learning javascript and was unaware of 'this'. Thanks for the great tip!

Ryan Over a year ago

Also, not enough reputation to be allowed to upvote yet. I shall when I am able.

Claudio Santos · Accepted Answer · 2013-10-25 22:42:25Z

0

With html you have the ability to add your property for an element, so you could do:

<button class="btnProduct" data-type="mostard"> Mostard</button> 
<button class="btnProduct" data-type="ketchup"> Ketchup</button>
<button class="btnProduct" data-type="barbecue"> Barbecue</button>

Then with a help of jquery you can do:

$('btnProduct').click(function(){
    //So, here you could use a switch or some logic 
    // to do different things for data-type
    console.log($(this).attr('data-type'))
}

edited Oct 25, 2013 at 22:42

answered Oct 25, 2013 at 22:34

Claudio Santos

1,31713 silver badges22 bronze badges

1 Comment

Ryan Over a year ago

I was able to use the other suggested method to solve my problem, but I definitely want to learn every method I can. I will attempt your suggestion next and let you know. Thank you for the response.

Collectives™ on Stack Overflow

How can I consolidate duplicated javascript functions?

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related