For help, excuse me I written in the book. The function in the js file, how can let. The node in the-CodePudding

Can I use an array to store my card information, and then display on the page, I hope to achieve by clicking on a card, you can
in into the detailsI wrote a page for details, but I these card Gain is less than the id is generated dynamically, js, front-end HTML if write directly in the onclick=function (" readProfile "), I write in the index. The function is called in the js: no, this how to solve?

Index.html

 & lt; Html> 
 
<meta charset="utf-8" & gt; 
 Getting Started: Inrupt JavaScript Client Libraries 
<script defer SRC="https://bbs.csdn.net/topics/index.js" & gt; </script> 
<link rel="stylesheet" href="https://bbs.csdn.net/topics/cardlist.css"/& gt; 
 
<body>

Index. Js

 
//show me the card table 
Async function showCardList () {
Var str1=""; 
Var j=0; 
//get all card information stored on the cloud, put into the array listArr 
Const mydb=await getSolidDataset (cardIdUrl, {fetch: fetch}); 
Let CARDS=getThingAll (mydb); 
Let listArr=[]; 
For (the let I=0; i
Let the item=CARDS [I] internal_url; 
Var ctitle=item. The split (" # ") [1] 
Var cnode={
Title: ctitle, 
Url: item, 
Details: 
 "haha"}; 

ListArr. Push (cnode); 

} 
//

Document. The getElementById (" cardlist ") style. The display="block"; 
//on the page one by one according to my cardname 
ListArr. ForEach (e=& gt; {
Str1 +='& lt; A title="' + e. itle + '" & gt; '+' & lt; H3 & gt; '+ e. itle +' & lt;/h3 & gt; '+' & lt;/a> '
}); 
//display the page 
Document. The getElementById (" showcardid "). The 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. The data [webID] vcard $hasEmail) {

Email=await solid. Data [` ${emailId} `]. Vcard $value; 

} 
For await (const telephoneID of solid. The data [webID] vcard $hasTelephone) {
Telephone=await solid. Data [telephoneID] vcard $value; 
} 
Document. The getElementById (" labelFN "). TextContent=fn; 
Document. The getElementById (" labelRole "). TextContent=role; 
Document. The getElementById (" labelON "). TextContent=organizationname; 
Document. The getElementById (" labelEmail "). TextContent=email; 
Document. The getElementById (" labeltp "). TextContent=telephone; 
}

CodePudding user response:

Display the page, click event to listen to specify the dom