我正在制作一个关于添加到购物车的项目。我想通过onclick从innerhtml传递事件。
这是我的html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Add to cart</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
</head>
<body>
<div id="cards-container" class="row align-items-center my-3 p-3"></div>
<script src="./script.js"></script>
</body>
</html>
这是我的js代码
fetch('https://jsonplaceholder.typicode.com/users')
.then(res=>res.json())
.then(data=>show(data))
function show(data){
const cardsContainer = document.getElementById('cards-container');
cardsContainer.innerHTML='';
data.map(element => {
const cardDiv = document.createElement('div')
cardDiv.className= "col-md-4"
cardDiv.innerHTML=`
<div class='card p-5 m-1'>
<h3>${element.name}</h3>
<h5>${element.email}</h3>
<button class="btn btn-primary" id='card-button' onclick='setLocalStorage(e)'>Add to Card</button>
</div>
`
cardsContainer.appendChild(cardDiv);
});
}
function setLocalStorage(e){
console.log("clicked",e)
}
我在控制台得到这个错误https://d.pr/i/JCjI77
我以前也遇到过几次这个问题。
首先，我建议使用jquery。在编写纯html时，我几乎总是使用jquery。它使与DOM的交互更加容易。下面是一个使用jquery的onClick事件的例子，该事件用于id="card-button"元素。普通的点击事件在这里不能用jquery。你需要在文档中设置它然后再设置一个选择器:
fetch('https://jsonplaceholder.typicode.com/users')
.then(res=>res.json())
.then(data=>show(data))
function show(data){
const cardsContainer = $('#cards-container');
cardsContainer.html("");
data.map(element => {
cardsContainer.append(`
<div class='card p-5 m-1 col-md-4'>
<h3>${element.name}</h3>
<h5>${element.email}</h3>
<button class="btn btn-primary" id='card-button'>Add to Card</button>
</div>
`
});
}
$(document).on("click", "#card-button", function(e) {
setLocalStorage(e)
// or you can just place the contents of setLocalStorage directly
// into here!
})
function setLocalStorage(e){
console.log("clicked",e)
}
你可以从这里的button元素中移除onClick。确保您记得导入jquery。最好是缩小版。
但是你还有一个更重要的问题
您正在创建具有相同id (card-button)的多个添加卡片按钮。你需要将card-button设置为一个类。这样它就可以应用于多个元素。我建议给按钮或与userID、Index或任何其他唯一标识符相关联的cardDiv添加一个ID。通过这种方式，您可以识别实际按下的是哪个用户或卡片按钮，并采取相应的操作。这是更新后的jQuery，用class代替ID
fetch('https://jsonplaceholder.typicode.com/users')
.then(res=>res.json())
.then(data=>show(data))
function show(data){
const cardsContainer = $('#cards-container');
cardsContainer.html("");
data.map(element => {
cardsContainer.append(`
<div class='card p-5 m-1 col-md-4'>
<h3>${element.name}</h3>
<h5>${element.email}</h3>
<button class="btn btn-primary" class="card-button" id='some-unique-id'>Add to Card</button>
</div>
`
});
}
$(document).on("click", ".card-button", function(e) {
setLocalStorage(e)
// or you can just place the contents of setLocalStorage directly into here!
// Here you can grab the jquery object with $(this), or use the
// ID with e.target.id with the e.target.id, etc...
clickedButton = $(this);
clickedButtonID = e.target.id;
})
function setLocalStorage(e){
console.log("clicked",e)
}
我不经常使用没有jQuery的纯HTML，所以我不能肯定地回答你是否想走这条路。似乎前面的帖子回答了这个问题，肯定比我能更好。
无法对尚未添加到文档
的HTML元素使用getElementById祝你好运!!