2017-06-27 50 views
1

JSで書いたこのコードには、HTMLページが反応していません。私は初心者です。JSの学習を始めました。JavaScript beginner:これはなぜ機能しませんか?

/* 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

私はそれを注文していますかなり確信していると私は上で動作する必要が私の構文は、何かアドバイスは大歓迎ですありがとうございました!

+1

'this.checkAvailabilityは{'有効な構文ではありません。あなたはおそらくより簡単なものから始めるべきです。 – Ryan

+0

インスタンスからプロパティにアクセスする必要があります! 'HiltonHotel.getHotelName()'など。あなたの 'checkAvailability'メソッド(構文が無効です)は意味をなさない。部屋が20部屋ある場合はまだ利用可能です...ここで質問する前に、コンソールでエラーを確認してください – Li357

+0

将来的に具体的にしてください。 * "うまくいかない" *私たちにはあまり言いません。エラーが発生している場合は、どの行にエラーが表示されますか?何が起こるか? –

答えて

2

少数の誤解:

  • checkAvailability機能である、あなたは括弧が欠落しています。
  • getHotelName関数にアクセスしているときに、その関数にアクセスして呼び出すには、HiltonHotel変数を参照する必要があります。
  • htmlコードにわずかなエラーがあり、コードスニペットで動作している間は、別のスクリプトを追加する必要はなく、デフォルトでは一緒に接続されています。

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

うわー!詳細な答えをありがとうございました! – ProxyStudent

1

@KindUserの答えに拡張:

あなたは、いくつかのプライベート状態を保存するために、このクラスの任意の場所にクロージャを使用していません。したがって、メソッドをインスタンスにではなく、インスタンスにアタッチする必要があります。すべてのインスタンスがインスタンスごとに1つずつではなく1つの関数を共有するので、より経済的です。そして、JSエンジンはそれをより良く最適化することができます。

その後、あなたはcheckAvailabilityで別のエラーを持っている:それはthisインスタンスのプロパティであるため、numRoomsthis.numRoomsとして対処する必要があり、この名前の変数がありません。

そして1つはスタイルです。

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

次へ:あなたは

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

のようなものを持っている場合は、これを簡略化することができます。コーディング基準に固執する。 JSでは、大文字で始まる変数/プロパティはクラス/コンストラクタを示すため、HotelNameHiltonHotelWeiHotelは誤解を招きます。
プロパティ名はhotelNameで、冗長で直感的です。あなたはHotelを持っています。それはnameですが、これは単なる意見です。

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>

又はES6クラス(および一部の周りplayinの)として:

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>

関連する問題