Question

所以我决定建立一个小网站来存储我的食谱，就像一本数字食谱书。这样，我可以通过更改Javascript中的几行（无需弄乱文件）从任何地方访问和编辑它们。单击其按钮时会显示每个配方，并在单击其隐藏按钮时消失。

有两个版本。有一个旧版本，其中的食谱是写入的。他们的按钮有预先编写的HTML，并且它们在javascript中的对象文字中。它位于github存储库的gh-pages分支上，并使用了github页面。它有效，所以我试图制作更具动态的第二版第二个版本位于github存储库的recipes-object-oriented分支上。它有一个类创建者，所以我可以通过调用它来添加食谱。它建立属性，为每个配方提供自己的更新/隐藏功能方法，并尝试使用DOM为它们及其按钮创建HTML。它不起作用。

我不确定哪些代码导致第二个版本无法正常工作，但我怀疑它是按钮。我宣布了一个食谱，但它的按钮没有出现。我以前没有看到有人在课堂上制作HTML，所以这可能不是正确的做法有关它的问题或代码的其他部分的任何想法？我对javaScript（只是一名中学生）不是很有经验，所以如果我不知道自己在做什么，那就道歉了。

GitHub存储库：https://github.com/skwawk/recipes
jsfiddle for second version：https://jsfiddle.net/psz3do70/1/
以下是第二个版本的类函数的代码。

function Recipe(id, name, ingredients, steps,) {
    this.id = id;
    this.name = name;
    this.title = "<h2>" + name + "</h2>";
    this.ingredients = ingredients;
    this.steps = steps;

    //the part that I'm worried about
    var btn = document.createElement("input");
    btn.type = "button";
    btn.name = this.id;
    btn.value = this.name;
    btn.onclick = this.update;
    document.body.appendChild(btn);
    var div = document.createElement("div");
    div.id = this.id;
    document.body.appendChild(div);

    this.printRecipe = function () {
            console.log(this.name);
            console.log();
            console.log(this.ingredients);
            console.log();
            console.log(this.steps);
    };
    this.update = function () {
        recipeDiv = document.getElementById(name);
        recipeDiv.innerHTML = this.title + this.ingredients + "<br /><br />" + this.steps;
    };
    this.hide = function() {
        recipeDiv = document.getElementById(name);
        recipeDiv.innerHTML = "";
    };

};

第二个版本几乎没有HTML，只是食谱标题。感谢您查看此内容，并提前感谢您的任何答案！

编辑：感谢您的反馈！我修复了你发现的一些错误（以及我应该抓到的错误），但它仍然没有用。至少我们更接近发现它何时发生！

使用JavaScript类创建按钮

0 个答案: