JavaScript beginner: why does this not work?
Question
My html page is not responding to this code I wrote in JS, i'm a total beginner, and just started learning JS, can somebody tell me why this doesn't work?
/* this is a practice file that'll play with js nothing strange to look at here folks! */ var firstName = 'Steven'; var lastName = 'Curry'; var fullName = firstName + ' ' + lastName; function Hotel(HotelName){ this.HotelName = HotelName; this.numRooms = 20; this.numGuests; this.checkAvailability { if(numRooms != 20 ){ return true; } else{ return false; } } this.getHotelName = function(){ //can it work with this dot operator? return this.HotelName; } } var HiltonHotel = new Hotel('Hilton'); var hName = document.getElementById('hotelName'); hName.textContent = getHotelName(); var el = document.getElementById('name'); el.textContent = fullName;
<!DOCTYPE html> <html> <body> <div id = 'greeting'> Hello <span id="name">friend</span>! <h1>Welcome To the <span id = 'hotelName'>Hyatt</span> </div> <script src = "https://stacksnippets.net/js"> </script> </body> </html
I'm pretty sure it's ordering and my syntax i need to work on, any advice is greatly appreciated thank you!
2 answers
solution1
2 ACCPTED 2017-06-27 22:01:31
Few misunderstandings:
-
checkAvailabilityis a function, you are missing parens. - while accessing the
getHotelNamefunction, you have to refer to theHiltonHotelvariable, to be able to access and call that function. - few minor errors in your
htmlcode, while operating in code snippet , you don't have to add a separate script, it's connected together by default.
var firstName = 'Steven'; var lastName = 'Curry'; var fullName = firstName + ' ' + lastName; function Hotel(HotelName) { this.HotelName = HotelName; this.numRooms = 20; this.numGuests; this.checkAvailability = function() { // it's a function (missing parens) if (numRooms != 20) { return true; } else { return false; } } this.getHotelName = function() { return this.HotelName; } } var WeiHotel = new Hotel('Hilton'); var hName = document.getElementById('hotelName'); hName.textContent = WeiHotel.getHotelName(); // refer to the `WeiHotel` variable var el = document.getElementById('name'); el.textContent = fullName;
<div id='greeting'> Hello <span id="name">friend</span>! <h1>Welcome To the <span id='hotelName'>Hyatt</span></h1> </div>
solution2
1 2017-06-28 12:06:44
An extension to the answer of @KindUser:
You're not using closures anywhere in this class to store some private state. Therefore you should attach the methods to the prototype and not to the instance itself. It's more economic, because now all instances share one function, not one per instance. And the JS engine can optimize that better.
Then, you have another error in checkAvailability : numRooms needs to be addressed as this.numRooms because it is a property of this instance, and there is no variable with this name.
And one about style. If you have something like
if(condition){
return true;
}else{
return false;
}
you can simplify this to:
return condition;
//or if you want to enforce a Boolean value,
//but your condition may return only a truthy/falsy value:
return Boolean(condition);
//sometimes also written as:
return !!(condition);
Next. Stick to the coding standards. In JS a variable/property starting with an uppercase letter would indicate a class/constructor, therefore HotelName , HiltonHotel , WeiHotel are misleading.
And I find the property name hotelName redundant and counter-intuitive. Imo you have a Hotel , it has a name , but that's just an opinion.
var firstName = 'Steven'; var lastName = 'Curry'; var fullName = firstName + ' ' + lastName; function Hotel(name) { this.name = name; this.numRooms = 20; this.numGuests; } Hotel.prototype.checkAvailability = function() { return this.numRooms !== 20; } Hotel.prototype.getHotelName = function() { return this.name; } var hotel = new Hotel('Hilton'); var hName = document.getElementById('hotelName'); hName.textContent = hotel.getHotelName(); // refer to the `weiHotel` variable var el = document.getElementById('name'); el.textContent = fullName;
<div id='greeting'> Hello <span id="name">friend</span>! <h1>Welcome To the <span id='hotelName'>Hyatt</span></h1> </div>
or as an ES6 class (and some playin around) :
class Person{ constructor(firstName, lastName){ this.firstName = firstName; this.lastName = lastName; } //this is a getter, you can read it like a property get fullName(){ return this.firstName + " " + this.lastName; } //this function is implicitely called whenever you try to convert //an instance of `Person` into a string. toString(){ return this.fullName; } } class Hotel{ constructor(name) { this.name = name; this.numRooms = 20; this.numGuests; } checkAvailability() { return this.numRooms !== 20; } getHotelName() { return this.name; } } var steve = new Person('Steven', 'Curry'); var hotel = new Hotel('Hilton'); var hName = document.getElementById('hotelName'); hName.textContent = hotel.getHotelName(); // refer to the `weiHotel` variable var el = document.getElementById('name'); el.textContent = steve.fullName; //this uses the `toString()` method to convert the `Person` steve into a string //for people, this makes sense, for the Hotel you'd want to think: // - where do I want to use this? // - and what should this string contain? console.log("Hello, I'm " + steve + " and I'm at the "+ hotel.name);
<div id='greeting'> Hello <span id="name">friend</span>! <h1>Welcome To the <span id='hotelName'>Hyatt</span></h1> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.