Кнопка не меняет html?

Question

Я пытаюсь создать функцию, в которой можно щелкнуть кнопкой, чтобы новый текст и элементы могли быть добавлены на страницу, но она не работает, я пытался проверить, почему, но весь мой синтаксис кажется быть верным. Но все же это не работает

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

Как @nnnnnn упоминалось в комментариях, JSFiddle по умолчанию вы ставите свой код в обработчик события onload. Все, кроме Recipes, определено в этой области. Когда обработчик onload будет завершен, все локальное для этой области будет потеряно, если вы не сохраните его где-нибудь, доступного вне этой области.

Для простого исправления, добавьте это в нижней части коды:

window.AddRecipe = AddRecipe; 

Это поставит AddRecipe в глобальном масштабе, что делает его доступным для onclick события кнопки. Из-за закрытия AddRecipe все, что было с ним, все еще доступно для AddRecipe, даже если оно скрыто от всего остального.