Getter/Setter help?

Summary:
So i’m creating a player attendance log that shows information on the users and whether they are logged in or not. I do this by using class syntax to create the properties for my objects. I then create my objects and put them into an array. Thirdly I put my array through a loop that creates elements, stores object values in them, and then add classes to those element .

Problem:
I’m trying to create a dynamic value that changes whether the player is logged in or not based on the time of day. I do this by using a getter/setter, but only the offline value is created. How did this happen and how can I fix it?

js problem code

 get online() {
   return this._online
 }
  set online(online) {
    this._online = online

    const today = new Date();
    const hour = today.getHours();
    const second = today.getSeconds();

    if (hour > 10 && hour < 20) {
      if(player1 && player2 && player3 && player4) {return true}
    }
    else {return false}

    if (second > 20 || second < 40) {
      if(error) {return false}
      }
      else {return true}
  }

Total JavaScript

/*using javascript class syntax to create and manage numerous objects at the same time.
 Class has to be upper case to differenciate from functions and variables*/
class Player {
//creates properties of the object we can plug in
 constructor(name,age,online) {
 this.name = name;
 this.age = age;
 //this.online = online;
}
//creates a method we can use for these objects that do special tasks

onlineStatus() {

  console.log(`${this.name} is ${this.online ? `online` : `offline`} at the moment`)}


 get online() {
   return this._online
 }
  set online(online) {
    this._online = online

    const today = new Date();
    const hour = today.getHours();
    const second = today.getSeconds();

    if (hour > 10 && hour < 20) {
      if(player1 && player2 && player3 && player4) {return true}
    }
    else {return false}

    if (second > 20 || second < 40) {
      if(error) {return false}
      }
      else {return true}
  }

}



//creating a new object from scratch using javascript class syntax. You can create objects very fast this way.
var player1 = new Player('Chris', '23');
var error = new Player('ERROR', 'ERROR');
var player2 = new Player('John', '34');
var player3 = new Player('Kelly', '18');
var player4 = new Player('Madison', '25');


//storing my objects in a array
var attendance = [player1, error, player2, player3, player4];



// Can style elements in the loop
for (var i = 0; i < attendance.length; i++) {

//selects the main element we want to add on to
  var playerList = document.getElementById('playerList');

 var playerProfile = document.createElement('UL')
 playerProfile.className = 'flex-container'
//creates li element then places the values of the obects inside of them

  var node1 = document.createElement('strong');
   node1.innerHTML = '<strong>' + 'Name:' + '</strong>';
   node1.className = 'name';

  var node2 = document.createElement('LI');
   node2.innerHTML = '<li>' + attendance[i].name + '</li>';
   node2.className = 'profile-name';

   var node3 = document.createElement('strong');
    node3.innerHTML = '<strong>' + 'Age:' + '</strong>';
    node3.className = 'age';


   var node4 = document.createElement('LI');
    node4.innerHTML = '<li>' + attendance[i].age + '</li>';
    node4.className = 'profile-age';

    var node5 = document.createElement('LI');
     node5.innerHTML = '<li>' + attendance[i].online + '</li>';


//if they value inside online is true. replace text and style. same for offline
    if (attendance[i].online  === true) {
      node5.textContent = 'Online';
      node5.className = 'style-online';
    }
    else {
      node5.textContent = 'Offline';
      node5.className = 'style-offline';
    }

//adds name, age, online list elements to the unordered list
   playerProfile.appendChild(node1)
   playerProfile.appendChild(node2)
   playerProfile.appendChild(node3)
   playerProfile.appendChild(node4)
   playerProfile.appendChild(node5)

//add unoredered list to the main element
 playerList.appendChild(playerProfile);

}

html

<!doctype html>

<html>
<head>
<link href="./normalize.css" type="text/css" rel="stylesheet">
<link href="./style.css" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Bebas+Neue|Poppins&display=swap" rel="stylesheet">
  <title>Employee log in</title>
</head>

<body>


  <header>
    <h3 class= 'Company-name'>Roku player Attendance Log </h3>
    <ul class = 'header-buttons'>
      <li>Sign Up</li>
      <li>log in</li>
      </ul>
  </header>

  <main id="playerList">


  </main>

  <footer>

  </footer>
  <script src="./script.js"></script>
</body>
</html>

Based on your code, i don’t think you entirely understand setters.

so here is a simple example:

class Example {
  constructor(){
    this._hello = ['a', 'b', 'c'];
  }
  
  get hello(){
    return this._hello.join('-');
  }
  
  set hello(newValue){
    this._hello.push(newValue);
  }
}

example = new Example

console.log(example.hello);

example.hello = 'd';

console.log(example.hello);

actually, I think I will let you study this example i think. See if this helps you figure out setters :slight_smile:

1 Like

getters allow us to get the value inside inside a property while setters allow us to set the value of a property. My mistake was that you can only set a value after the object has been created, not while it’s being created. So i put my dynamic values into a loop and i’m setting the values correctly, but i’m sill only getting a false value

js


 get online() {
   return this._online
 }
 set online(online) {
   this._online = online
 }

loop

for (var i = 0; i < attendance.length; i++)  {
const today = new Date();
const hour = today.getHours();
const second = today.getSeconds();


if (hour > 10 && hour < 20) {
  if(player1 && player2 && player3 && player4) {attendance[i].online = true;}
}
else {attendance[i].online = false;}

if (second > 20 || second < 40) {
  if(error) {attendance[i].online = false;}
  }
  else {attendance[i].online = true;}

}

Could you make a codepen? This way, seeing the changes in your code is a lot easier

I’ve never used codepen. give me moment.

If codepen is too complicated, you can also post your full code here (but having to do that several times is time consuming), something like codepen is then ideal

I still don’t fully understand Codepen, but it is the most beautiful dev tool I have ever seen :smiley:.
here’s the link from my address bar and my original code JavaScript is on the original post. If this doesn’t work i can copy and paste my new Javascript.

https://codepen.io/chris-cooper-the-bold/pen/GRgoRoW

in theory the objects player1-player4 are supposed to be online from 10am-8pm and then they go offline. the object called '‘error’ is supposed to switch from offline to online every 20 seconds. This code doesn’t work no matter what i change.

And which code would do that? Now the page is rendered, which will execute the JS code once. That is it

true, but in theory if they refresh the page (say 30 seconds later) then the object called ‘error’ will switch from online to offline.

That is very big difference. I am going to take a minute to study the code more thoroughly. Will report back asap

1 Like

i figured something out, here:

if(player1 && player2 && player3 && player4)

this condition is always true. no comparisons are happening, so JS simply checks if these values are truth y.

this condition is also always true:

if (second > 20 || second < 40)

if seconds = 10, seconds < 40 is true, i think you should use an and operator here

i think the condition can be simplified as whole, just making some changes to your code. Will share in a bit

Here are the changes i made:

https://codepen.io/stetim94/pen/rNaxNrN?editors=0011

i remove things from a loop which shouldn’t be in a loop, i did a single DOM lookup and insertion (much more efficient)

this still needs refactoring:

    if (hour > 7 && hour < 20) {
        if(player1 && player2 && player3 && player4) {attendance[i]._online = true;}
    } else {
        attendance[i]._online = false;
    }

    if (second > 20 || second < 40) {
        if(error) {
            attendance[i]._online = true;}
    } else {
        attendance[i]._online = false;
    }

i think it can be done more efficient and there logic mistakes in there at the moment

1 Like

thank you stetim94, you’re the best.