Huh? Why would poolRoster
be an object, it’s an array.
In JS an array is TYPE object, but instance of Array.
Is there any way to remedy this?
No need to. Nothing wrong.
Sorry, I guess I wasn’t very clear, I meant is there any way to remedy the issue it causes.
Not sure I follow. That an array is an object? That is not an issue, but by design.
const arr = new Array();
console.log(typeof arr); // => 'object'
console.log(arr instanceof Array) // => true
I am refering to this problem:
Replace it with,
//jshint esnext:true
For some reason the esnext directive is not taking. When I use var
to declare it, typeof poolRoster
returns “object”, as it should.
Sorry, I may not have been clear when explaining my issue…
This is my Javascript
//jshint esnext:true
const today = new Date(),
dateFormattingOptions = {weekday: "long", year: "numeric", month: "long", day: "numeric"},
dayOfWeekNames = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
let pswd = "Harper17";
//Member
class Member {
constructor(name, isCheckingIn = false){
this.name = name;
this.isCheckedIn = false;
this.checkInDay = null;
this.dayOfTheWeek = null;
this.bookedDays = {monday: "No", tuesday: "No", wednesday: "No", thursday: "No", friday: "No",};
if (isCheckingIn === true){
this.checkIn();
}
}
checkIn(){
let now = new Date(), dayOfWeek = now.getDay();
if (!this.isWeekday(dayOfWeek)){
displayError(103);
this.isCheckedIn = false;
} else {
this.isCheckedIn = true;
this.checkInDay = now;
this.checkOutDay = false;
this.dayOfTheWeek = this.getProperDayName(dayOfWeek);
this.setBookedDay();
}
}
checkOut(){
if (!this.isCheckedIn){
displayError(101);
}
let pass = "";
pass = prompt("Password:");
if (pass == pswd){
this.isCheckedIn = false;
this.checkInDay = null;
this.dayOfTheWeek = null;
this.setBookedDay();
} else {
displayError(102);
}
}
displayStatus() {
if (!this.isCheckedIn){return `${this.name} | Checked In: No`;}
return `${this.name} | ${this.getFormattedDate()} | Checked In: Yes on ${this.dayOfTheWeek}`;
}
//Note: 0 = Sunday, 1 = Monday, 2 = Tuesday, 3 = Wednesday, 4 = Thursday, 5 = Friday, 6 = Saturday
getFormattedDate(){
return this.checkInDay.toLocaleDateString("en-US", dateFormattingOptions);
}
isWeekday(dayIndex){
return dayIndex >= 1 && dayIndex <= 5;
}
getProperDayName(dayIndex){
return dayOfWeekNames[dayIndex];
}
setBookedDay(){
const value = this.isCheckedIn ? "Yes" : "No";
this.bookedDays[this.dayOfTheWeek.toLowerCase()] = value;
}
}
//Roster
function displayToday(){
return "Today's date: " + today.toLocaleDateString("en-US", dateFormattingOptions) + ".";
}
const poolRoster = [];
function displayError(code){
console.log("Error", code);
let msg = "";
if (code === 101){
msg = "You are already logged in.";
} else if (code === 102){
msg = "Incorrect Password";
} else if (code === 103){
msg = "Sorry, check-in is only allowed on weekdays.";
}
alert(msg);
console.log(msg)
return msg;
}
function displayRoster(){
for (n = 0; n < poolRoster.length; n++) {
console.log(poolRoster[n].displayStatus());
}
}
function addMember(name, checkIn){
const member = new Member(name, checkIn);
poolRoster.push(member);
}
function runInstance(bool){
let pass = "";
pass = prompt("Password:");
if (pass == pswd){
let name = prompt("Name:");
addMember(name, bool);
displayRoster();
} else {
displayError(102);
}
}
You can see my entire code here.
This is the error message I receive
"ReferenceError: poolRoster is not defined
at HTMLButtonElement.onclick (https://null.jsbin.com/runner:1:2836)"
You are not getting ES6 support.
using const today ...
today instanceof Date
"today is not defined"
using var today ...
today instanceof Date
true
(Sigh…) Excuse me while I go bang my head against a wall a couple hundred times…
Changing all const
and let
to var
appears to have fixed my initial issue.
However, I now receive the following error:
"TypeError: Cannot read property 'toLowerCase' of null
at Member.setBookedDay (giqanof.js:64:43)
at Member.checkOut (giqanof.js:43:18)
at HTMLButtonElement.onclick (https://null.jsbin.com/runner:1:2930)"
If we write a prompt,
var a = prompt("Enter some text").toLowerCase();
and then click Cancel
, the return will be null
which has no attributes.
Question: How do you align HTML <button></button>
elements in CSS?
The following is an excerpt of the program I am trying to accomplish this on. You can find the entire thing here.
<script src="index.js"></script>
<h2>Header</h2>
<div id="buttons">
<button onclick="runInstance(false)">Add Member</button>
<button onclick="runInstance(true)">Add Member + Check Them In</button>
<button onclick="clearRoster()">Clear Roster</button>
</div>
I checked the docs…
But I couldn’t seem to find anything on the subject. After which, I proceeded to sandbox around and see if I couldn’t just figure it out on my own…
button {
text-align: center;
margin: 0 auto;
float: none;
align-self: center;
}
However none of this seemed to work. (In case you couldn’t tell) I’m trying to center them. Any Ideas?
The button
element takes its default styles from the form
control group. As we can see, it uses default font size, color, text-alignment, mouseover effect, and active state behavior (push button visuals).
Buttons are inline elements so appear all on the same line with default spacing, left aligned positionally.
To apply custom styles it may require converting them to inline-blocks so you can give them dimensions and positional properties.
I got it to work doing this:
button {
display: inline-block;
margin-left: auto;
margin-right: auto;
text-align: left;
}
#buttons {
display: block;
text-align: center;
}
Hey @mtf and @hellofromtonya,
I have made even more progress since we spoke… you can see my code here.
However, now I am receiving the following error:
"error"
"TypeError: Cannot read property 'displayName' of undefined
at jetehaz.js:136:66"
I know what is causing it; I am calling functions on indexed items that do not exist yet…
However, I’ve no idea how to remedy this issue.
Any suggestions?
First suggestion, try to find a way to incorporate your 15 ‘executables’ into a single loop that iterates over the entire poolRoster
and get rid of all the code bloat (repeated patterns).
if (a !== undefined)
is the long way of writing,
if (a)
There is no need for an else if in a binary scenario.
if (a) {
} else {
}
Binary.
Like this?
// Executables
function memberName(num){
for (i = 0; i > poolRoster.length; i++) {
if (poolRoster[(num - 1)] === poolRoster[i]) {
let n = poolRoster[i].displayName();
} else {
n = "Member Name";
}
document.getElementById(`memberName${num}`).innerHTML = n;
}
}
function memberBool(num){
for (i = 0; i > poolRoster.length; i++) {
if (poolRoster[(num - 1)] === poolRoster[i]) {
let c = poolRoster[i].displayCheckedIn();
} else {
c = "Member Status";
}
document.getElementById(`memberBool${num}`).innerHTML = c;
}
}
memberName();
memberBool();