Unable to reassign global variable in JavaScript function

Question

I'm having problems reassigning the value of an object's property from inside a JavaScript/jQuery function.

I'm writing some basic validation on six input fields within a form element, ensuring the fields are not empty. Once all input fields have a value in them, I'd like to display additional input fields in the form that are initially hidden.

The problem I have is I can't update my object properties from within my function.

I'm passing a variable in a function, and it seems to be updated within my function but I'm not seeing the variable's value change globally.

Here's the object in the global scope that keeps track of whether the fields are validated:

var validationObject = {
  titleValid: "n",
  firstNameValid: "n",
  lastNameValid: "n",
  emailValid: "n",
  contactEmailValid: "n",
  contactSMSValid: "n"
}

For each field I'm calling a version of this function. I think the problem is here -- one of the arguments I'm passing in the function is 'firstNameValid':

function firstNameIsValid() {
  return fieldHasValue($("input#field_firstName"), $("div#first_name_error"), firstNameValid);
  }
  $("input#field_firstName").on('change blur', firstNameIsValid);

The preceding function uses this function, which I'm planning to reuse with all input fields:

function fieldHasValue(field, label, validationProperty) {
  var value = field.val().trim(); //Grab value without leading or trailing whitespace
  if (value.length > 0) {
    label.hide(); //hide error message 
    validationProperty = "y"; //set property in global object?
  } else {
    label.show();
    validated = "n";
    field.focus();
  }
  return (value.length > 0);
}

After running the function, the third parameter in the fieldHasValue function, 'validationProperty', is being used literally within the firstNameIsValid function. The result is my object becomes:

var validationObject = {
  titleValid: "n",
  firstNameValid: "n",
  lastNameValid: "n",
  emailValid: "n",
  contactEmailValid: "n",
  contactSMSValid: "n",
  validationProperty: "y"
}

If you know how I can update the object from within the fieldHasValue() function, please send word.

Because you are not passing a reference, you are passing the value. — epascarello
– epascarello, Commented Apr 27, 2021 at 16:39
You're passing undefined, actually, unless you have a with statement not showing. To pass the value, pass validationObject.firstNameValid. To set the value, pass "firstNameValid" and use the code @halilcakar shows. — Heretic Monkey
– Heretic Monkey, Commented Apr 27, 2021 at 16:44
return fieldHasValue({..}, {..}, firstNameValid); - what's firstNameValid? Hint: it's not validationObject.firstNameValid — fdomn-m
– fdomn-m, Commented Apr 27, 2021 at 17:05

fdomn-m · Accepted Answer · 2021-04-27 17:13:07Z

1

You can pass in the name of the property and then use

validationObject[propertyName] = "y";

Cutting down your code to the essential parts, here's an example:

var val = {
  isValid: false
};

function setValid(propName) {
  val[propName] = true;
}

setValid("isValid")
console.log(val);

Note that you need to pass in the property name as a string "isValid"

You might expect to be able to do:

function setValid(prop) {
    prop = true;
}
setValid(val.isValid);

but this passes in the value of val.isValid (the boolean in this case or string in your case).

answered Apr 27, 2021 at 17:13

fdomn-m

28.8k8 gold badges39 silver badges70 bronze badges

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

Collectives™ on Stack Overflow

Unable to reassign global variable in JavaScript function

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related