I’m stuck!!! I’m trying my newfound coding skills on a home project and I have a 3 functions finding a total of 3 different input values. Now I want to use the totals inside those functions in another function. My first thought was to use a global variable of subTotal but the new function would only give me the value assigned to it originally and not the subTotal of the functions I need to use… hope this makes sense.
not really
it is difficult to help without seeing your code
can you share it?
not that it made much sense, but here is few pointers i could give.
You must make sure your functions return some value and make sure they have been called in order to execute their code, otherwise they are just a block of code which sits there, but isnt put into use. Another principle is, any variables created inside those functions are local, thus, they cant be called outside them(but you can make the respective function return their value).
You might need to review exercises regarding functions to get a better understanding of how they work
Yeah, if you “need” global variables, then you’re probably thinking of things incorrectly. If you can share your code or explain it in pseudo code or even just as narrative - perhaps we can help.
Here’s the js. I’m taking actually 4 input values going through a function and assigning the total to a p tag. What I want to do is take the ‘total’ output of the four functions and add them all together, as in the last function. but I cant use the local variable inside the four, and I cant use the global because it comes back as 0 (its original assigned value)
function addOne() {
"use strict";
let subTotal = 0;
let amountOne = document.getElementById("amount_one").value;
let freqOne = document.getElementById("freq_one").value;
if (freqOne == "weekly") {
subTotal = amountOne * 4;
} else if (freqOne == "biweekly") {
subTotal = amountOne * 2;
} else if (freqOne == "monthly") {
subTotal = amountOne;
}
document.getElementById("display1").innerHTML = "Paycheck One; " + subTotal;
}
function addTwo() {
"use strict";
let subTotal = 0;
let amountTwo = document.getElementById("amount_two").value;
let freqTwo = document.getElementById("freq_two").value;
if (freqTwo == "weekly") {
subTotal = amountTwo * 4;
} else if (freqTwo == "biweekly") {
subTotal = amountTwo * 2;
} else if (freqTwo == "monthly") {
subTotal = amountTwo;
}
document.getElementById("display2").innerHTML = "Paycheck Two; " + subTotal;
}
function addThree() {
"use strict";
let subTotal = 0;
let amountThree = document.getElementById("amount_three").value;
let freqThree = document.getElementById("freq_three").value;
if (freqThree == "weekly") {
subTotal = amountThree * 4;
} else if (freqThree == "biweekly") {
subTotal = amountThree * 2;
} else if (freqThree == "monthly") {
subTotal = amountThree;
}
document.getElementById("display3").innerHTML = "Paycheck Three; " + subTotal;
}
function addFour() {
"use strict";
let subTotal = 0;
let amountFour = document.getElementById("amount_four").value;
let freqFour = document.getElementById("freq_four").value;
if (freqFour == "weekly") {
subTotal = amountFour * 4;
} else if (freqFour == "biweekly") {
subTotal = amountFour * 2;
} else if (freqFour == "monthly") {
subTotal = amountFour;
}
document.getElementById("display4").innerHTML = "Paycheck Four; " + subTotal;
}
function submitAll() {
"use strict";
let total = 0;
let subTotal1 = document.getElementById("display1").value;
let subTotal2 = document.getElementById("display2").value;
let subTotal3 = document.getElementById("display3").value;
let subTotal4 = document.getElementById("display4").value;
total = subTotal1 + subTotal2 + subTotal3 + subTotal4;
document.getElementById("total").innerHtml = "Your Total Monthly Income is; " + total;
localStorage.setItem("total", total)
}
The ‘display1, 2, 3’ is id’s on a p tag. When the global variable didn’t work I tried getting values back off the p tag to add them, that didn’t seem to work either.
I dont see anywhere in your code the functions being called in order for their code to execute and produce some result. For example addFour();
would make that function run its code, otherwise its just a block of code thats waiting to be used. If you call it once more, it would run its code again. With this being said and seeing your functions pretty much represent the same actions, with some tweaking you could make all this happen withing one function which is being called few times, but again, id suggest you review the curriculum regarding functions. Loops could also be of great use here(to run the function four times for example)
I didn’t include the html. I have inputs with onClick functions being called on all the functions. I was just wanting to know how I could get my local variable ‘total’ to work inside another function.
So, a couple of thoughts here.
Your function is trying to do too much:
function addOne() {
let subTotal = 0;
let amountOne = document.getElementById("amount_one").value;
let freqOne = document.getElementById("freq_one").value;
if (freqOne == "weekly") {
subTotal = amountOne * 4;
} else if (freqOne == "biweekly") {
subTotal = amountOne * 2;
} else if (freqOne == "monthly") {
subTotal = amountOne;
}
document.getElementById("display1").innerHTML = "Paycheck One; " + subTotal;
}
It shouldn’t be adding and changing the DOM. I would simplify the function, and just have it take in the values and get the subTotal.
function getSubtotal(value, frequency) {
switch (frequency) {
case 'weekly':
return value * 4;
case 'biweekly':
return value * 2;
case 'monthly':
return value;
default:
return 0;
}
}
That could probably be further simplified to be:
function getSubtotal(value, frequency) {
const frequencyMultiplier = { weekly: 4, biweekly: 2, monthly: 1 };
return value * (frequencyMultiplier[frequency] || 0);
}
Then you could call it with
const subtotalOne = getSubTotal(document.getElementById("amount_one").value, document.getElementById("freq_one").value);
I suppose you could embed those selectors:
function getSubtotal(label) {
const frequencyMultiplier = { weekly: 4, biweekly: 2, monthly: 1 };
const amount = document.getElementById("amount_" + label).value;
const frequency = document.getElementById("freq_" + label).value;
return amount * (frequencyMultiplier[frequency] || 0);
}
and just pass in the label “one”.
So I would get those values back in my main function. Then I could have a separate function to update the DOM. Your values would be store in variables in the main function so you wouldn’t need to grab them off the DOM. In fact, you could probably store the labels in an array of strings and loop though to call those helper functions and simplify things. But that my be getting too cool for the room.
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.