2017-06-27 6 views
1

Meine HTML-Seite reagiert nicht auf diesen Code, den ich in JS geschrieben habe, ich bin ein totaler Anfänger und habe gerade angefangen JS zu lernen, kann mir jemand sagen, warum das nicht funktioniert?JavaScript-Anfänger: Warum funktioniert das nicht?

/* 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){ 
 
\t this.HotelName = HotelName; 
 
\t this.numRooms = 20; 
 
\t this.numGuests; 
 
\t this.checkAvailability { 
 
\t \t if(numRooms != 20){ 
 
\t \t \t return true; 
 
\t \t } 
 
\t \t else{ 
 
\t \t \t return false; 
 
\t \t } 
 
\t } 
 
\t this.getHotelName = function(){ 
 
\t \t //can it work with this dot operator? 
 
\t \t return this.HotelName; 
 
\t } 
 
} 
 

 
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> 
 
\t <div id = 'greeting'> Hello 
 
\t \t <span id="name">friend</span>! 
 
\t \t <h1>Welcome To the <span id = 'hotelName'>Hyatt</span> 
 
\t </div> 
 
\t <script 
 
\t src = "https://stacksnippets.net/js"> 
 
\t </script> 
 
</body> 
 
</html

Ich bin mir ziemlich sicher, dass es die Bestellung und meine Syntax ich brauche ich danke Ihnen zu arbeiten, ist eine Beratung sehr geschätzt!

+1

'' this.checkAvailability {nicht gültige Syntax . Sie sollten wahrscheinlich mit einfacheren Dingen beginnen. – Ryan

+0

Sie müssen auf die Eigenschaft von der Instanz zugreifen! 'HiltonHotel.getHotelName()' usw. Auch Ihre 'checkAvailability' Methode (die eine ungültige Syntax hat) macht keinen Sinn. Wenn es 20 Zimmer gibt, dann ist es immer noch verfügbar ... Bitte überprüfen Sie die Konsole auf Fehler, bevor Sie hier nachfragen. – Li357

+0

In der Zukunft, seien Sie bitte genau. * "Funktioniert nicht" * sagt uns nicht viel. Erhalten Sie einen Fehler und wenn ja, in welcher Zeile und was sagt der Fehler? Passiert etwas? –

Antwort

2

Ein paar Missverständnisse:

  • checkAvailability ist eine Funktion, sind Sie Pars.
  • Beim Zugriff auf die getHotelName-Funktion müssen Sie auf die Variable HiltonHotel zugreifen, um auf diese Funktion zugreifen und sie aufrufen zu können.
  • einige kleinere Fehler in Ihrem html Code, während Sie in Code-Snippet arbeiten, müssen Sie kein separates Skript hinzufügen, es ist standardmäßig miteinander verbunden.

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>

+1

Wow! Vielen Dank für die ausführliche Antwort! – ProxyStudent

1

Eine Erweiterung auf die Antwort von @KindUser:

Sie sind nicht Schließungen überall in dieser Klasse mit einigen privaten Zustand zu speichern. Daher sollten Sie die Methoden an den Prototyp und nicht an die Instanz selbst anhängen. Es ist wirtschaftlicher, denn jetzt teilen alle Instanzen eine Funktion, nicht eine pro Instanz. Und die JS-Engine kann das besser optimieren.

Dann haben Sie einen anderen Fehler in checkAvailability: numRooms als this.numRooms angegangen werden muss, weil es eine Eigenschaft von this Instanz ist, und es gibt keine Variable mit diesem Namen.

Und man über Stil. Wenn Sie so etwas wie

if(condition){ 
    return true; 
}else{ 
    return false; 
} 

haben, können Sie diese vereinfachen:

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); 

Weiter. Halten Sie sich an die Codierungsstandards. In JS würde eine Variable/Eigenschaft, die mit einem Großbuchstaben beginnt, auf eine Klasse/einen Konstruktor hinweisen, daher sind HotelName, HiltonHotel, WeiHotel irreführend.
Und ich finde den Namen der Eigenschaft hotelName redundant und kontraintuitiv. Imo hast du eine Hotel, es hat eine name, aber das ist nur eine Meinung.

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>

oder als ES6 Klasse (und einige 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>