Problem with parameters in JavaScript (Beginner)


#1

Hey guys, total beginner at JavaScript here. I'm having a bit of trouble with giving parameters to my function and having it behave the way I want. Specifically, I want the function to run a couple of times, and every time it runs I want it to increase the value of a variable (integer) by a value that is equal to a second variable. Here's my code:

//First scenario//

var firstNumber = 4;
var secondNumber = 8;
console.log("WITH PARAMETERS:")

function add (a, b) {
	a += b;
	console.log(a);

} 

add(firstNumber, secondNumber);
add(firstNumber, secondNumber);
add(firstNumber, secondNumber);
add(firstNumber, secondNumber);	

//Second scenario//

console.log("WITHOUT PARAMETERS:");
function add2 () {
	firstNumber += secondNumber;
	console.log(firstNumber);

}

add2();
add2();
add2();
add2();

In the first scenario, the console just returns the value 12, four times. In the second, it goes 12, 20, 28, 36, like it should (or like I want it to, I guess). I kind of see what the problem is already, but don't know how to solve it; every time the function runs, it says "oh okay, so "a" is still 4, right?" instead of taking its incremented value, or 12 after the first time the function runs.

In scenario #2, it does exactly what I want it to do, but without the parameters. Is there something I'm missing? Why isn't this working? Any help would greatly be appreciated, thanks :slight_smile:


#2

Your first scenario does nothing to alter the global variables, so the four calls result in the same response.

function add (a, b) {
    return a + b;
}
var firstNumber = 4;
var secondNumber = 8;

firstNumber = add(firstNumber, secondNumber);
console.log(firstNumber);
firstNumber = add(firstNumber, secondNumber);
console.log(firstNumber);
firstNumber = add(firstNumber, secondNumber);
console.log(firstNumber);
firstNumber = add(firstNumber, secondNumber);
console.log(firstNumber);

Output

12
20
28
36

#3

Ah yes, but what I want to do is use only the parameters to get the same result without having to type the variable names at all. Ultimately I want this same function to run with many different variables, so having to actually write down firstNumber = add(firstNumber, secondNumber); isn't going to work.

Is there anyway that I could get that same output purely by using parameters?

EDIT: Maybe it'll help if I explain in more detail what I want to accomplish ultimately. I want to use a function to increment a value inside a div tag by increments of 1, 5, 10, and -1, -5 and -10.

So, instead of having to write 6 functions to do basically the same thing only with different numbers, I thought that I'd just use one, with different parameters. The parameters I need to set are:
1. The variable which I want to change by said increments.
2. The value by which I want to change it.
3. The ID of the div tag.

So, this is the code I originally planned on using:

function IncrementVariable(currentValue, increment, idTag) {
	currentValue += increment;
	document.getElementbyId(idTag).innerHTML = currentValue;
	console.log(currentValue);
}

And then I'd call it with something like IncrementVariable(5, 10, 'divID') only to have it return the same value as many times as I'd call the function. What I want is the value to get higher (or lower), every time I run the function, but solely by using parameters, since I'm going to be doing this for a large number of variables in the future. I hope this helps you understand what my goal is better :slight_smile:


#4

The place to store the current value is in your HTML. It can be polled inside your function...

function incrementValue (idTag, increment) {
    var el = document.querySelector(idTag);
    var val = parseInt(el.innerHTML, 10);    // convert text to integer
    el.innerHTML = val + increment;
}

#5

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.