Question

我试图创建一个可以点击按钮的功能，以便可以将新的文本/元素添加到页面中，但它不起作用，我试图检查为什么，但我的所有语法似乎都是正确的。但它还没有工作

＆＃13;

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

＆＃13;

<p id="text">
  To be vanished by javascript
</p>

<button onclick="AddRecipe()">Display Recipe</button>

＆＃13;

Answer 1

正如评论中提到的@nnnnnn，JSFiddle默认您将代码放在onload事件处理程序中。除Recipes之外的所有内容都在该范围内定义。当onload处理程序完成后，该范围的所有内容都将丢失，除非您将其存储在该范围之外的某个位置。

要进行简单修复，请在代码底部添加：

window.AddRecipe = AddRecipe;

这会将AddRecipe置于全局范围内，使按钮的onclick事件可以访问它。由于AddRecipe已关闭，AddRecipe仍然可以访问getUser()所有内容，即使它对其他所有内容都是隐藏的。

按钮是不是在改变html？

1 个答案: