Summing a total from different functions - Javascript

Question

I need to be able to create a seperate function which creates a total figure from variables within 2 different functions.

    function addToy1()
{
var i = document.getElementById("qty_toy1");
var qtytoy1 = i.options[i.selectedIndex].text;
var qtytoy1tot = qtytoy1 * 26.99;
var generateTableToy1="<table width=\"210px\" border=\"0\">"
                    +"  <tr>"
                    +"    <td width=\"140\">Optimus Prime</td>"
                    +"    <td width=\"25\">x " + qtytoy1 + "</td>"
                    +"    <td width=\"45\">&pound;" + qtytoy1tot + "</td>"
                    +"  </tr>"
                    +"</table>";

document.getElementById("toy1_add").innerHTML=generateTableToy1;

}

function addToy2()
{
var i = document.getElementById("qty_toy2");
var qtytoy2 = i.options[i.selectedIndex].text;
var qtytoy2tot = qtytoy2 * 14.39;
var generateTableToy2="<table width=\"210px\" border=\"0\">"
                    +"  <tr>"
                    +"    <td width=\"140\">Bumblebee</td>"
                    +"    <td width=\"25\">x " + qtytoy2 + "</td>"
                    +"    <td width=\"45\">&pound;" + qtytoy2tot + "</td>"
                    +"  </tr>"
                    +"</table>";

document.getElementById("toy2_add").innerHTML=generateTableToy2;


}

With this code I need to make a sum of both variables "qtytoy1tot" and "qtytoy2tot". I am new to Javascript. Please help where you can. Thanks.

@Whymarrh I'm sincerely curious, but what's the problem with `function addToyX() {}`? — Andreas Wong, Apr 05 '12 at 02:02
You could return "qtytoy1tot" and "qtytoy2tot" from the respective functions and do it that way. — Chetter Hummin, Apr 05 '12 at 02:02
@Whymarrh Please refrain from making sweeping statements as if they are best practices if you're just basing it on what you heard and are not speaking from experience. If you're interested in learning about the differences between the two, please take a look at the answers and links in comments on this question: http://stackoverflow.com/questions/336859/javascript-var-functionname-function-vs-function-functionname — Timothy Strimple, Apr 05 '12 at 02:11
@Whymarrh—so you are just parroting a mystic incantation with no logical explanation. Cool. — RobG, Apr 05 '12 at 02:11
@Whymarrh - no, "I've just heard" is not a real reason, and it's a terrible justification for your definitive statement in the beginning of this comment stream. There are reasons to use function expressions vs function declarations. Read more here: http://javascriptweblog.wordpress.com/2010/07/06/function-declarations-vs-function-expressions/ — Cheeso, Apr 05 '12 at 02:14
Is there anyway I can pass the variables "qtytoy1tot" and "qtytoy2tot" into the same function? — Sean Zulu, Apr 05 '12 at 02:40

score 0 · Accepted Answer · answered Apr 05 '12 at 02:59

You have a number of options here. The most straight forward is as Amit suggested in the comment, just return the total from each of the methods. This may or may not work depending on how you plan on using these methods. Something like the following should work for your purposes.

function ToyBox() {
    this.total = 0;
}

ToyBox.prototype.addToy1 = function() {
    var i = document.getElementById("qty_toy1");
    var qtytoy1 = i.options[i.selectedIndex].text;
    var qtytoy1tot = qtytoy1 * 26.99;
    this.total += qtytoy1tot;
    var generateTableToy1="<table width=\"210px\" border=\"0\">"
                        +"  <tr>"
                        +"    <td width=\"140\">Optimus Prime</td>"
                        +"    <td width=\"25\">x " + qtytoy1 + "</td>"
                        +"    <td width=\"45\">&pound;" + qtytoy1tot + "</td>"
                        +"  </tr>"
                        +"</table>";

    document.getElementById("toy1_add").innerHTML=generateTableToy1;
        };

ToyBox.prototype.addToy2 = function() {
    var i = document.getElementById("qty_toy2");
    var qtytoy2 = i.options[i.selectedIndex].text;
    var qtytoy2tot = qtytoy2 * 14.39;
    this.total += qtytoy2tot;
    var generateTableToy2="<table width=\"210px\" border=\"0\">"
                        +"  <tr>"
                        +"    <td width=\"140\">Bumblebee</td>"
                        +"    <td width=\"25\">x " + qtytoy2 + "</td>"
                        +"    <td width=\"45\">&pound;" + qtytoy2tot + "</td>"
                        +"  </tr>"
                        +"</table>";

    document.getElementById("toy2_add").innerHTML=generateTableToy2;
};

var toyBox = new ToyBox();
toyBox.addToy1();
toyBox.addToy2();
console.log(toyBox.total);

Keep in mind, you really just have one function here, and you should pass in the variable parts in as parameters to the function, but I think that may be beyond the scope of this question.

Summing a total from different functions - Javascript

1 Answers1