請問我用個陣列存放了我的card資訊，然后展示到了頁面上，我希望能實作點擊一個card的就能進到詳情里
我寫了個詳情頁面，但是我的這些card<a></a>是動態生成的，js里獲取不到id，前端html里如果直接寫 onclick=function("readProfile")，我寫在index.js里的函式卻呼叫不了，這個怎么解決呢？
index.html
<html>
<head>
<meta charset="utf-8">
<title>Getting Started: Inrupt JavaScript Client Libraries</title>
<script defer src="https://bbs.csdn.net/topics/index.js" ></script>
<link rel="stylesheet" href="https://bbs.csdn.net/topics/cardlist.css" />
</head>
<body>
<div id = "cardlist" class = "panel" name = "cardlist">
<h1>CardList</h1>
<div id = "showcardid" class = "panel" name = "showcardid"></div>
</div>
</body>
</html>
index.js
//展示我的card表
async function showCardList(){
var str1 = "";
var j = 0;
//獲取存在云端上的所有card資訊，存到陣列listArr里
const mydb = await getSolidDataset(cardIdUrl,{fetch:fetch});
let cards = getThingAll(mydb);
let listArr = [];
for (let i = 0;i<cards.length;i++){
let item =cards[i].internal_url;
var ctitle = item.split("#")[1]
var cnode = {
title:ctitle,
url:item,
details:"haha"
};
listArr.push(cnode);
}
//
document.getElementById("cardlist").style.display = "block";
//在頁面上逐個顯示我的cardname
listArr.forEach(e => {
str1 += '<a title="' + e.title + '">'+'<h3 class="list-title">' + e.title + '</h3>'+'</a>'
});
// 展示到頁面
document.getElementById("showcardid").innerHTML = str1;
}
async function readProfile() {
const webID = "https://wenjingli.solid.fuxitechnology.cn/CardList/card1#card1";
const role =await solid.data[webID].vcard$role;
const organizationname =await solid.data[webID]['http://www.w3.org/2006/vcard/ns#organization-name'];
const fn =await solid.data[webID].vcard$fn;
let email='';
let telephone='';
for await(const emailId of solid.data[webID].vcard$hasEmail){
email=await solid.data[`${emailId}`].vcard$value;
}
for await(const telephoneID of solid.data[webID].vcard$hasTelephone){
telephone=await solid.data[telephoneID].vcard$value;
}
document.getElementById("labelFN").textContent = fn;
document.getElementById("labelRole").textContent = role;
document.getElementById("labelON").textContent = organizationname;
document.getElementById("labelEmail").textContent = email;
document.getElementById("labeltp").textContent = telephone;
}
uj5u.com熱心網友回復：
展示到頁面以后，對監聽指定dom的click事件轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/276097.html
標籤：JavaScript
上一篇：vue-video-player