Javascript 为什么可以'；难道我不能在课外找到方法吗？

我正在努力解决以下问题： 我必须使用JS来创建一个按钮

//btn add
let button_add = document.createElement("button");
let button_add_class = button_add.className = "btn-add";
let button_add_click = button_add.setAttribute("onclick", "addBookToShoppingCart(first)");
let buttonText1 = document.createTextNode("Add to Shopping Cart");
button_add.appendChild(buttonText1);
this.mainBookScreen.appendChild(button_add);

该按钮需要调用

addbookthoppingcart（first）

方法，该方法位于

ShoppingCart

类中

class ShoppingCart{
   addBookToShoppingCart(bookObject) {
         alert('Hello World!');
   }
}

如果单击该按钮，我会在浏览器控制台中收到以下错误消息：

未捕获引用错误：未定义addBookToShoppingCart
在HTMLButtonElement.onclick

编辑： 我的最新代码如下：

class ShoppingCart{
    addBookToShoppingCart(bookObject) {
        alert('Hello World!');
    }
}

class Shop {
    constructor() {
        this.shoppingCart = new ShoppingCart("Shopping Cart");
        this.mainBookScreen = document.getElementById("mainBookScreen");
    }
    addBookToScreen(book) {
    //btn add
        const button_add = document.createElement("button");
        button_add.classList.add("btn-add");
        button_add.textContent = "Add to Shopping Cart";
        button_add.addEventListener("click", function(){this.shoppingCart.addBookToShoppingCart(first)});
        this.mainBookScreen.appendChild(button_add);
    }
}

class Book {
    //book constructors
}

let first = "TEST";
let book = [];
book[0] = new Book("bla1", "bla2", "bla3");
boook[1] = new Book("ble1", "ble2", "ble3");

const shop = new Shop();

shop.addBookToScreen(book[0]);
shop.addBookToScreen(book[1]);

如果单击按钮，浏览器中会显示错误消息：

无法读取未定义的属性“addBookToShoppingCart” 在HTMLButtoneElement

---

JS中的类有自己的作用域。换句话说，函数

addBookToShoppingCart

在全局范围内不可用，这意味着您在不创建类的对象的情况下无法访问它。下面是一个如何访问类内部函数的示例

类狗{
函数bark（）{}
} 
var dog=新的dog（）；
狗吠

---

有关更多详细信息，请阅读JS中的和。

您遇到了一些问题

首先，不要使用DOM属性设置事件，如

onclick

。虽然这可以工作，但它是一种更过时的方法，不符合即将使用的DOM事件处理标准

其次，当你只是设置一个对象的属性时，你不应该设置变量——你可以只设置属性

至于调用方法，您需要先创建类的一个实例，然后才能使用它，当您这样做时，必须在该实例的上下文中调用属性和方法

类购物车{
addBookToShoppingCart（bookObject）{
警惕（“你好，世界！”）；
}
}
//创建类的实例：
let cart=新购物车（）；
让我们先“测试”；
const button_add=document.createElement（“按钮”）；
//您不需要变量来简单地设置属性：
按钮添加类列表添加（“btn添加”）；
按钮_add.textContent=“添加到购物车”；
//使用.addEventListener（）设置事件，但第二个参数需要
//函数引用，因此您的函数调用需要包装在
//引用，但在调用中，必须按以下方式调用函数
//类实例的方法。
按钮_add.addEventListener（“单击”，函数（）{cart.addBookToShoppingCart（第一个）}）；
document.body.appendChild（按钮添加）我看到两个问题，其中一个是名为boook的变量未定义

另一个问题是函数addEventListener中的这个引用的是按钮，类似于调用元素.shoppingCart.addBookToShoppingCart（第一个）

要修复它，请使用此引用保存一个变量并使用它，我将为您提供一个完整的示例：


$(function(){

    class ShoppingCart{
        
        addBookToShoppingCart(bookObject) {
            alert('Hello World!');
        }
        
    }

    class Shop {
        constructor() {
            this.shoppingCart = new ShoppingCart();
            this.mainBookScreen = document.getElementById("mainBookScreen");
        }
        addBookToScreen(book){
        //btn add
            const button_add = document.createElement("button");
            button_add.classList.add("btn-add");
            button_add.textContent = "Add to Shopping Cart";
            
            let classhere = this;
            
            button_add.addEventListener("click", function(){
                
                //this -> button element..
                
                classhere.shoppingCart.addBookToShoppingCart(first);
                
            });
            
            this.mainBookScreen.appendChild(button_add);
        }
    }

    class Book {
        //book constructors
    }

    let first = "TEST";
    let book = [];
    book[0] = new Book("bla1", "bla2", "bla3");
    book[1] = new Book("ble1", "ble2", "ble3");

    const shop = new Shop();

    shop.addBookToScreen(book[0]);
    shop.addBookToScreen(book[1]);

});

因为
addBookToShoppingCart
不是全局变量，您永远不应该使用setAttribute来查找事件这是否回答了您的问题？谢谢你帮了我很多。如果我有两门课呢。在这种情况下，
ShoppingCart
和
Shop
。我在Shop类的构造函数中创建了一个新的ShoppingCart实例。除了构造函数外，还有一个
addBookToScreen（book）
方法。我将关于
按钮的代码粘贴到这里，添加
声明和
.addEventListener（）
的方式与您解释的相同。
第一个
变量声明在类之外。如果我单击按钮，则会显示错误消息：“shoppingCart.addBookToShoppingCart不是HtmlButtoneElement的函数。”我错在哪里？…我找到了上一个主题，并按照您在最高评分答案（非静态）案例中看到的方式进行了修改。@MartinB我们需要查看您的最新代码。您应该编辑您的问题并附加您现在拥有的内容。@ScottMarkus编辑并添加了最新代码。谢谢@MartinB查看我更新的答案，不要忘记单击答案左上方的复选标记，将答案标记为“the”答案。