用JavaScript动态生成LinkedIn共享按钮

Question

在开始之前，我应该提到我最近发布了一个类似的问题，我试图在Twitter上做同样的事情。我最终使用了twttr.widgets.createShareButton函数，它的工作非常干净。这个问题可能有类似的解决方案，但我还没能从阅读微软领英共享插件指南中找到这样的解决方案。

我使用详细信息和摘要标签来显示一个职业列表，每个摘要中都有数据元素，存储一个附加到网站URL的代码。当用户单击摘要元素时，它会创建一个指向该角色的功能技能列表页面的超链接。然后我想生成一个按钮，这样网站用户就可以分享到领英。

这是我迄今为止拥有的代码笔。我把生成LinkedIn共享按钮的代码放在一个名为lnShare的函数中。下面的线似乎不起作用。

document.getElementById("p3"(.appendChild(ln(

我尝试从lnShare函数返回ln，然后在调用该函数后直接调用appendChild，但这也不起作用。我得到：

ReferenceError:ln未定义

为了更好地说明我正在尝试做什么，代码笔显示了它与Twitter twttr.widgets.createShareButton函数的配合。

这是我的代码：

function lnShare() {
console.log("lnShare started");
const ln = document.createElement('script');
ln.id="LN";
ln.type="IN/Share";
ln.setAttribute("data-url", fs.href);
//document.getElementById("p3").appendChild(ln);
console.log(ln);
return ln;  
}
const root = "https://www.onetonline.org/link/summary/";

const fs = document.createElement('a');
fs.id="FS";
const linkText = document.createTextNode("functional skills");
fs.appendChild(linkText);
fs.classList.add("hide");
fs.title = "functional skills";
fs.href = "https://www.onetonline.org/link/summary/";
document.getElementById("p1").appendChild(fs);

document.getElementById("container").addEventListener("click",function(e) {
const tgt = e.target;
const isSummary = tgt.tagName==="SUMMARY";
const code = tgt.dataset.code;
console.log(root+code);
fs.classList.toggle("hide",!isSummary || !code); // show only if summary AND code exists
if (isSummary && code) {
fs.href=root+code;
console.log(fs.href);
lnShare(fs.href);
document.getElementById("p3").appendChild(ln);
}  
})

.hide { display:none; }

<div id="container">
<details id="agriculture" class="details">
<summary>Agriculture</summary>
<details>
<summary data-code="53-7064.00">Picking & packing</summary>
</details>
<details>
<summary data-code="45-2092.02">Farm worker</summary>
</details>
<details>
<summary data-code="45-2091.00">Agricultural Equipment Operator</summary>
</details>
<details>
<summary data-code="45-2093.00">Farmworkers, Farm, Ranch, and Aquacultural Animals</summary>
</details>
</details>
<details id="construction" class="details">
<summary>Construction</summary>
<details>
<summary data-code="47-2061.00">Construction Labourer</summary>
</details>
<details>
<summary data-code="47-2073.00">Operating Engineers and Other Construction Equipment Operators</summary>
</details>
<details data-code="47-2051.00">
<summary>Cement Masons and Concrete Finishers</summary>
</details>
<details>
<summary data-code="47-2021.00">Brickmasons and Blockmasons</summary>
</details>
<details>
<summary data-code="47-4031.00">Fence Erector</summary>
</details>
<details>
<summary data-code="17-3031.01">Surveying Technician</summary>
</details>
</details>
</div>
<p id="p1"></p>
<p id="p2"></p>
<p id="p3"></p>

<script src="https://platform.linkedin.com/in.js" type="text/javascript">lang: en_US</script>

我们非常感谢所有的协助。

Answer 1

您在document.getElementById("p3").appendChild(ln);中引用ln，但该变量尚未初始化。您需要将前一行更新为const ln = lnShare(fs.href);

Answer 2

第一个问题是ln不在document.getElementById("p3").appendChild(ln)行的范围内，您可以尝试使用document.getElementById("p3").appendChild(lnShare())