javascript - 如何对使用 javascript 中的循环创建的按钮使用相同的功能

Question

我正在学习 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>

我的问题是将为表中的每个值创建“添加到购物车”按钮。单击该按钮时，它应该单独检索该书名的名称。你能帮助我使用 Javascript 吗？

Answer 1

我的猜测是，根据代码，传递按钮编号可能会有用，因为您将类名用作函数的参数。所以像 cart(1) 这样的东西会返回那个按钮。由于您使用的是 JSP for 循环，因此您应该能够获取按钮的第 ith<​​ 元素。然后你可以使用

在 JS 中获取该特定元素

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

希望这能回答您的问题!!

P.S 我不懂JSP