Changing Variable Passed as Parameter in Javascript

Question

I've recently been working on a project making a form. I have a button setup to make more fields appear and people need them, but am currently using 3 seperate functions and know there must be a way to shorten my code.

I'm hoping to pass the variable that I want to work with as a parameter. For example, I'd like to use something like

var first = 1
var middle = 1
var last = 1

function increment("first, middle or last") {
"parameter"++
} 
console.log(parameter) //outputs "2"

Here's the 3 functions I'm using right now that I'd like to condense into just 1.

var first = 1;
var middle = 1;
var last = 1


function firstNameFields() {
    first = first + 1;
    var x = document.getElementById("firstField" + first);
    if (first >= 0) {
        x.style.display = "table-row";
    } else {
        x.style.display = "none";
    }
    if (first >= 10) {
        document.getElementById("first").style.display = "none";
    }
}

function middleNameFields() {
    middle = middle + 1;
    var x = document.getElementById("middleField" + middle);
    if (middle >= 0) {
        x.style.display = "table-row";
    } else {
        x.style.display = "none";
    }
    if (middle >= 10) {
        document.getElementById("middle").style.display = "none";
    }
}

function lastNameFields() {
    last = last + 1;
    var x = document.getElementById("lastField" + last);
    if (last >= 0) {
        x.style.display = "table-row";
    } else {
        x.style.display = "none";
    }
    1;
    if (last >= 10) {
        document.getElementById("last").style.display = "none";
    }
}

Thank you so much!

@JuhilSomaiya The second block of code there works, it's just quite a bit of code for something I'm sure can be condensed. I'd like to merge all of those functions into a single one, and then use a parameter to indicate which variable to change, opposed to using a seperate function to change each variable. — KPopOG
– KPopOG, Commented Mar 16, 2020 at 4:07

Pointy · Accepted Answer · 2020-03-16 04:06:23Z

2

You can't modify plain variables with a function in the way you describe, but there are alternatives. You can use an object with properties instead of a collection of variables, and then pass the name of the property (i.e., a string) to the function:

var name = {
  first: 1, middle: 1, last: 1
};

function increment(part) {
  name[part]++;
}

Now increment("first") will increment name.first.

answered Mar 16, 2020 at 4:06

Pointy

415k62 gold badges600 silver badges631 bronze badges

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

2 Comments

Pointy Over a year ago

Strictly speaking, you can modify global variables in some environments, but in reality that's just a special case of the trick I employed here. Also it's pretty ugly and bug-prone. This is cleaner.

KPopOG Over a year ago

Awesome, thank you so much! I appreciate it and am going to go try it out in the rest of my code. It looks fantastic though and will make my life much, much easier :D

Collectives™ on Stack Overflow

Changing Variable Passed as Parameter in Javascript

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