原型功能不運行的onclick與不正確執行反正

1）我不知道如何讓按鈕的onclick調用JS函數原型爲原型函數的名稱不是像一個正常的功能

2）函數原型應該顯然無論如何運行，並改變與在JS函數來描述文本的段落標記，但它不運行

有人能指教一下我在這裏做錯了嗎？特別是對於編號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>

來源

2017-03-18 user3760941

您可以直接調用它：'house.prototype.methodexample（）'，並在你的情況下，這將工作，因爲你的方法沒有做任何事情的實例屬性（它不會引用'this'），但沒有任何意義的原型方法不參考到實例屬性，所以通常你會創建一個'house'的實例並通過實例調用它。關於你的第2點，它應該運行，爲什麼呢？除非你叫它，否則它不會運行。（順便說一句，我不認爲任何CSS都與你所要求的相關 - 不需要在問題中包含它。） – nnnnnn

你需要創建一個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>

來源

2017-03-18 01:04:05 Barmar

你必須實例房子關鍵字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>

來源

2017-03-18 01:07:06 aeid

這可以用於示例函數，但不會如果原型方法使用'this'（原型方法通常會這樣做）就會工作。 – nnnnnn

請你舉個例子吧！ – aeid

我的意思是說，原型函數說'... innerHTML = this.bedrooms'。如果在調用函數時用'.addEventListener（）所示綁定了事件偵聽器，那麼'this'將是被點擊的DOM元素，而不是'house'的實例。（關於你的編輯，在'onclick'屬性中你最後需要'（）'。） – nnnnnn

就像aeid說的那樣，你可以傳遞一個處理函數給按鈕，甚至可以更好地附加一個eventListener。

我建議你避免使用構造函數和'新'。事情變得更清潔和更容易使用對象文本或工廠的功能，例如：

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附着的方法：用ES6它會更好看

來源

2017-03-18 02:01:05

原型功能不運行的onclick與不正確執行反正

回答

相關問題