Question

我在Javascript中有以下代码。正如您所看到的，我有一个名为ICeCream的通用类，其他3个类继承该类。我想这样做，所以方法displayEntity（）为显示准备一个div标签。除了一个问题外似乎有效。问题是我似乎无法使onclick属性工作。它包含＆＃34; undefined＆＃34;在生成的HTML中或具有以下代码

function() {
alert(this.name + " clicked!")}

我的最终目标是拥有一个HTML div标签，其中包含＆＃34; onclick＆＃34;包含来自相应对象的方法。也就是说，当点击不同的div时，应该调用不同对象的不同方法。我怎样才能做到这一点？

这是主要代码：

    //Implementation of inheritance between objects
function inheritPrototype(childObject, parentObject) {
            // So the copyOfParent object now has everything the parentObject has 
            var copyOfParent = Object.create(parentObject.prototype);
            //Then we set the constructor of this new object to point to the childObject.
            // Why do we manually set the copyOfParent constructor here, see the explanation immediately following this code block.
            copyOfParent.constructor = childObject;
            // Then we set the childObject prototype to copyOfParent, so that the childObject can in turn inherit everything from copyOfParent (from parentObject)
            childObject.prototype = copyOfParent;
}


//General IceCream object
function IceCream (name, description){
    this.numberScoops = 0;
    this.flavors = [];
    this.numberSoda = 1;
    this.name = name;
    this.description = description;
    this.cssID = this.name.replace(/\s+/g,'');
}


IceCream.prototype.click = function() {
    alert(this.name + " clicked!")
}

IceCream.prototype.displayEntity = function(object){
    var itemToDisplay = "";

    itemToDisplay += '<div id="' + this.cssID + '" class="menuitem" value="" onclick="">' + '<h2>' + this.name + '</h2>' + '&nbsp;' + this.description + '<div>';


//  itemToDisplay += '<div id="menuitem" value="" mousedown="<script>' + this.click + '</script>">' + '<h2>' + this.name + '</h2>' + '&nbsp;' + this.description + '<div>';


    itemToDisplay += "<br>";

    console.log (itemToDisplay);
    console.log(this);
    //document.getElementById("Menu").innerHTML += itemToDisplay;

    return itemToDisplay;
}

//Declare Cone object
function Cone(name,description){
        IceCream.call(this,name,description);
}
//Cone inherits from IceCream
inheritPrototype(Cone, IceCream);

//Declare Milkshake object
function MilkShake(name, description){
        IceCream.call(this,name,description);
}
//Milkshake inherits from IceCream
inheritPrototype(MilkShake, IceCream);

//Declare Float object
function Float(name, description){
        IceCream.call(this, name, description);
}
//Float inherits from IceCream
inheritPrototype(Float, IceCream);
console.log("Code ran;")

var Menu = [new Cone("Cone","Waffle Cone with 1-2 Scoops"), new MilkShake("Delicious Milkshake", "Milkshake with Skim, Whole or 2% Milk"), new Float("Ice Cream Float", "Any number of scoops and flavors, one soda")];

// Display all the questions
    Menu.forEach(function (eachItem)  {
            document.getElementById("Menu").innerHTML += eachItem.displayEntity(eachItem);
});

在Prototype中编写DIV标签时更改onclick属性

0 个答案: