如何对javascript中使用循环创建的按钮使用相同的函数

我正在学习JSP和javascript，在理解下面的概念时遇到了困难。我正在尝试使用for循环向HTML页面添加多个按钮，我希望在Javascript的一个函数中获得每个按钮的功能。请查找以下代码：

<%
BookDetails book=new BookDetails();
ArrayList<String> booktitle=book.Display();
System.out.println("In JSP page");
%>
<%for(int i=0;i<booktitle.size();i++){ %>
<h2>
<%=booktitle.get(i) %></h2><br>
<button onclick="cart()" class="books" >Add to cart</button>

<% } %>

<script>
function cart(){
    alert("Hi");
}
</script>

我的猜测是，根据代码的不同，传递按钮号可能会很有用，因为您使用类名作为参数输入函数。因此类似于
cart（1）
的东西将返回该按钮。因为您使用的是JSP for循环，所以应该能够获得按钮的第i个元素。然后，您可以使用

 document.getElementsByClassName('class-name')[i]

希望这能回答你的问题

另外，我不知道JSP，所以如果你想添加一个书名，你需要把它作为一个参数传入

因此：

您可以将
书名.get（i）
传递到
cart
函数中，如下所示

<button onclick="cart('<%=booktitle.get(i).replace("'","\\'") %>')" class="books" >
    Add to cart
</button>


添加到购物车

在这里，您需要转义单引号（
”
），以确保获得完整的书名。
您可以在具有所有按钮的容器元素上添加单击事件侦听器。在需要的地方将自定义属性添加到元素中，并将
角色
自定义属性添加到添加或删除内容（具有行为）的按钮中

使用
role
比使用class要好，因为浏览器使用class来使元素看起来像某种特定的方式，如果有人想使元素看起来像
role
用于行为，则可以对其进行更改（作为约定，您需要同意，因为这是一个用户定义的属性，而浏览器不处理这些属性）


const functionToAddItem=event=>{
const itemID=event.target.getAttribute（“x-item-id”）；
log（“这是添加项”，itemID）；
}
const functionToRemoveItem=事件=>{
const itemID=event.target.getAttribute（“x-item-id”）；
log（“这是删除项”，itemID）；
}
document.body.querySelector（`[x-role=“item container”]`）。addEventListener(
“点击”，
事件=>{
const action=event.target.getAttribute（“x角色”）；
开关（动作）{
案例（“添加项目”）：
功能添加项（事件）；
打破
案例（“删除项目”）：
移动项目（事件）的功能；
打破
违约：
//无所事事
}
}
)

添加
去除
在调用函数
cart
时传递书名怎么样？类似于
cart（）
。您能详细介绍一下如何在HTML和javascript中使用它吗？
function cart(nameOfBook){
    alert(nameOfBook);
}

<button onclick="cart('<%=booktitle.get(i).replace("'","\\'") %>')" class="books" >
    Add to cart
</button>