Search code examples
javascriptjqueryobjectcheckbox

Updating properties of object within a function, and then making object accessible outside of function

I'm somewhat of a novice when it comes to JavaScript.

My goal is to create an object, and have checkboxes be able to update the properties of this object based on whether they are checked or not. I can get the object to be updated within the "change" listener function for an individual checkbox, but I want to be able to pass that updated object back into other checkbox listener functions.

Basically, I'd like to pass around that 'tenant' object (whose default will have 'status' set to 'true')to multiple checkbox listeners which can update the object. So I guess my question is how to get the updated object to be accessible outside of the checkbox function.

Code below:

//Build 'tenant' object
var tenantObject = {
  "Tenants": [{
   "Name": "WeWork",
   "Status": true
  }, {
   "Name": "Regus",
   "Status": true
   }
]
 }

console.log(tenantObject)//Status is 'true'


//Tenant Checkboxes
    d3.selectAll("#WeWorkCheckbox").on("change", function() {
            var type = "WeWork"
            display = this.checked ? "inline" : "none";
            statusCheck = this.checked ? true : false
            if (statusCheck == false) {
                tenantObject.Tenants[0].Status = false
                console.log(tenantObject.Tenants)// This works - the WeWork item now reads 'false'
                return tenantObject.Tenants             
            } 
            });

console.log(tenantObject)//Status still reads 'true' for WeWork, I want this to reflect the update in the above function
Solution

  • Your code is working, but your final console.log statement is firing before you have a chance to make a change. Basically, from the rendering engine's point of view, the page loads, and the following events happen within milliseconds:

    1. You console.log tenantObject
    2. You set an event listener on #WeWorkCheckbox, waiting for a change
    3. You console.log tenantObject again

    A very long time later, from the browser's point of view—several hundred milliseconds at least—a change event fires on #WeWorkCheckbox, the value of tenantObject.Tenants[0].Status is changed to false, and tenantObject.Tenants is logged to the console.

    To demonstrate that your code is working correctly, just do a setTimeout that calls a different function to console.log tenantObject after 5000 milliseconds. That should give you plenty of time to uncheck the checkbox before it fires, and then when it does, the new value of tenantObject.Tenants[0].Status will be logged to the console outside your .on function.

    As follows (I've changed your console.log statements to only show tenantObject.Tenants[0].Status, for ease of visualizing in the console):

    //Build 'tenant' object
var tenantObject = {
  "Tenants": [{
    "Name": "WeWork",
    "Status": true
  }, {
    "Name": "Regus",
    "Status": true
  }]
}

console.log(tenantObject.Tenants[0].Status) //Status is 'true'


//Tenant Checkboxes
d3.selectAll("#WeWorkCheckbox").on("change", function () {
  var type = "WeWork"
  display = this.checked ? "inline" : "none";
  statusCheck = this.checked ? true : false
  if (statusCheck == false) {
    tenantObject.Tenants[0].Status = false
    console.log(tenantObject.Tenants[0].Status) // This works - the WeWork item now reads 'false'
    return tenantObject.Tenants
  }
});

var showOff = function () {
  console.log(tenantObject.Tenants[0].Status);
}

setTimeout(showOff, 5000);

    I had to guess at your HTML because it wasn't provided, so for reference, here's the HTML I used:

    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <form action="/" method="POST">
    <input type="checkbox" name="WeWorkCheckbox" id="WeWorkCheckbox" checked>
    <input type="checkbox" name="RegusCheckbox" id="RegusCheckbox" checked>
  </form>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://d3js.org/d3.v5.min.js"></script>
  <script src="index.js" charset="utf-8"></script>
</body>

</html>