ボタンはHTMLを変更していませんか？

Question

私はボタンをクリックして新しいテキスト/と要素をページに追加できるようにしようとしていますが、機能していません。理由を調べようとしましたが、正しい。しかし、まだそれは、コメントで述べたよう@nnnnnn

Recipes = {}; 
 

 
function Recipe(name, origin, auther, ingredients, directions) { 
 
    this.name = name; 
 
    this.origin = origin; 
 
    this.author = auther; 
 
    this.ingredients = ingredients; 
 
    this.directions = directions; 
 
}; 
 

 
Recipe.prototype.printRecipe = function(){ 
 
    var text = ""; 
 
    for (var i=0; i < Object.keys(this).length; i++) { 
 
     text += "<br/>" + this[Object.keys(this)[i]]; 
 
    }; 
 
    return text; 
 
}; 
 

 
var Salad = new Recipe("Fruit Salad", "Unknown", "Unknown", "Apples, Bananas, Berries, Milk, Sugar, Dry fruits", "<ul><li>sdasds</li></ul>"); 
 

 

 
function AddRecipe(){ 
 
    document.getElementById("text").innerHTML = Salad.printRecipe(); 
 
};

<p id="text"> 
 
    To be vanished by javascript 
 
</p> 
 

 
<button onclick="AddRecipe()">Display Recipe</button>

Answer 1

を働いていないJSFiddleのデフォルトは、あなたはonloadイベントハンドラ内にコードを配置します。 Recipesを除くすべてがそのスコープ内で定義されています。 onloadハンドラが終了すると、そのスコープの外にアクセス可能などこかに格納しない限り、そのスコープにローカルなものはすべて失われます。

簡単な修正のために、あなたのコードの下でこれを追加します。これは、グローバルスコープでAddRecipeを置く

window.AddRecipe = AddRecipe; 

、ボタンのonclickイベントにそれがアクセスできます。 AddRecipeの閉鎖のため、それ以外のものから隠されていても、それにあったものはすべてAddRecipeにアクセスできます。