プロトタイプ機能はonclickの実行されません＆正しく動作しません。とにかく

Question

この試みと2つの問題があります。

1）私のようにonclickのJSプロトタイプ機能を呼び出すためのボタンを取得する方法がわかりませんプロトタイプ関数はプロトタイプ機能が明らかにとにかく実行して、JS関数で記述されたテキストと段落タグを変更するが、それは

を実行していないはずです）正常な機能

2のように命名されていない誰かが何を私に助言でしたここで間違ってる？特に番号2では、コーディングのエラーを見ることはできません。

本当に助けていただきありがとうございます。

function house(bedrooms, bathrooms, floors) { 
 
    this.bedrooms = bedrooms; 
 
    this.bathrooms = bathrooms; 
 
    this.floors = floors; 
 
    // objects 
 
} 
 

 
house.prototype.methodexample = function() { 
 
    document.getElementById("prototype-example").innerHTML = "The prototype property can also be used with functions."; 
 
}

@charset "UTF-8"; 
 

 
/* CSS Document */ 
 

 
body { 
 
    height: 1000px; 
 
    width: 100%; 
 
    background: #fff; 
 
    margin: 0; 
 
} 
 

 
#javascript-essentials { 
 
    width: 100%; 
 
    height: auto; 
 
    margin: 10px; 
 
    padding: 10px; 
 
    background: #eff2f7; 
 
} 
 

 
#javascript-programming-techniques { 
 
    width: 100%; 
 
    height: auto; 
 
    margin: 10px; 
 
    padding: 10px; 
 
    background: #F0F9FC; 
 
} 
 

 
.divider { 
 
    width: 100%; 
 
    height: auto; 
 
    background: #CCC; 
 
    display: block; 
 
    margin: 10px; 
 
} 
 

 
h1 { 
 
    font-size: 25px; 
 
    display: block; 
 
    width: 100%; 
 
    height: auto; 
 
    margin: 10px; 
 
    text-decoration: underline; 
 
} 
 

 
h2 { 
 
    font-size: 20px; 
 
    display: block; 
 
    width: 100%; 
 
    height: auto; 
 
    margin: 10px; 
 
    text-decoration: underline; 
 
} 
 

 
h3 { 
 
    font-size: 16px; 
 
    display: block; 
 
} 
 

 
#prototype-example {}

<!-- Checklist: Prototype --> 
 
<article class="divider"> 
 
    <h3>Prototype Property</h3> 
 
    <p>The prototype property adds new properties or methods to Javascript objects.</p> 
 
    <p>NOT WORKING!!!!!!!!!!!!!</p> 
 
    <p id="prototype-example"></p> 
 
    <button onclick="______________">Click Me</button> 
 
</article>

Answer 1

あなたは、そのオブジェクトのメソッドを呼び出して、houseオブジェクトを作成する必要があります。

function house(bedrooms, bathrooms, floors) { 
 
    this.bedrooms = bedrooms; 
 
    this.bathrooms = bathrooms; 
 
    this.floors = floors; 
 
    // objects 
 
} 
 

 
house.prototype.methodexample = function() { 
 
    document.getElementById("prototype-example").innerHTML = "The house has " + this.floors + " floors"; 
 
} 
 

 
var myHouse = new house(2, 2, 3);

@charset "UTF-8"; 
 

 
/* CSS Document */ 
 

 
body { 
 
    height: 1000px; 
 
    width: 100%; 
 
    background: #fff; 
 
    margin: 0; 
 
} 
 

 
#javascript-essentials { 
 
    width: 100%; 
 
    height: auto; 
 
    margin: 10px; 
 
    padding: 10px; 
 
    background: #eff2f7; 
 
} 
 

 
#javascript-programming-techniques { 
 
    width: 100%; 
 
    height: auto; 
 
    margin: 10px; 
 
    padding: 10px; 
 
    background: #F0F9FC; 
 
} 
 

 
.divider { 
 
    width: 100%; 
 
    height: auto; 
 
    background: #CCC; 
 
    display: block; 
 
    margin: 10px; 
 
} 
 

 
h1 { 
 
    font-size: 25px; 
 
    display: block; 
 
    width: 100%; 
 
    height: auto; 
 
    margin: 10px; 
 
    text-decoration: underline; 
 
} 
 

 
h2 { 
 
    font-size: 20px; 
 
    display: block; 
 
    width: 100%; 
 
    height: auto; 
 
    margin: 10px; 
 
    text-decoration: underline; 
 
} 
 

 
h3 { 
 
    font-size: 16px; 
 
    display: block; 
 
} 
 

 
#prototype-example {}

<!-- Checklist: Prototype --> 
 
<article class="divider"> 
 
    <h3>Prototype Property</h3> 
 
    <p>The prototype property adds new properties or methods to Javascript objects.</p> 
 
    <p>NOT WORKING!!!!!!!!!!!!!</p> 
 
    <p id="prototype-example"></p> 
 
    <button onclick="myHouse.methodexample()">Click Me</button> 
 
</article>

Answer 2

あなたはキーワードnewと一緒に家をインスタンス化する必要があり、任意のメソッドのためのルックアップに失敗し、ここで

自動的にプロトタイプに

function house(bedrooms, bathrooms, floors) { 
     this.bedrooms = bedrooms; 
     this.bathrooms = bathrooms; 
     this.floors = floors; 
     // objects 
    } 

    house.prototype.methodexample = function() { 
     document.getElementById("prototype-example").innerHTML = "The prototype property can also be used with functions."; 
    } 

    document.getElementById('button').addEventListener('click' , (new house).methodexample) 

を委任しますあなたは、HTMLからの場合呼び出す方法です

<button id='button' onClick="(new house).methodexample">Click Me</button> 

Answer 3

aeidと同じように、ハンドラ関数をボタンに渡したり、イベントハンドラをイベントハンドラに追加することもできます。

コンストラクタ関数と 'new'の使用を避けることをお勧めします。物事は、たとえば、オブジェクトリテラルまたは工場機能で非常にクリーンかつ容易に入手：

function house (bedrooms, bathrooms, floors) { 
    return { 
    bedrooms: bedrooms, 
    bathrooms: bathrooms, 
    floors: floors, 
    methodExample: function() { 
     document.getElementById("prototype-example").innerHTML = "The house has " + floors + " floors"; 
    } 
    } 
} 

var MyHouse = house(3, 3, 2) 

document.getElementById('button').addEventListener('click' , MyHouse.methodexample) 

あなたはコンストラクタ関数その後、はるかに優れている閉鎖、の利点を取得します。

代わりにあなたは、工場で最初のオブジェクトを作成し、.prototype

PSと方法を添付することができます：それは