更改对象内容时如何更改文件链接答案

【问题标题】：How do I change a file link when I change the object content更改对象内容时如何更改文件链接
【发布时间】：2016-08-11 00:33:14
【问题描述】：

我是 Javascript 的菜鸟，我试图在单击锚点时更改文件链接。也许我对这一切都错了，但就是这样。我想根据我显示的 PDF 更改 PDF 下载链接。

我有四个链接正在调用一个文件来填充 HTML 对象。我要更改的链接在对象之外。

<div class="menu-item"><a href='javascript:heywoodEnvelopes()' id="ww">Heywood White Wove</a></div>
<div class="menu-item"><a href='javascript:heywoodMI()' id="mi">Heywood White Wove MI</a></div>
<div class="menu-item"><a href='javascript:heywoodRemittance()' id="re">Heywood Remittance</a></div>
<div class="menu-item"><a href="javascript:heywoodBC()" id="bc">Heywood Booklets &amp; Catalogs</a></div>

当我点击这些链接时，我希望更改以下 href：

<span class="download-link">If your browser does not support viewing PDF's, please click<a class="download" href="#" id="pdfLink" download> HERE </a>to download a copy.</span>

我在这里尝试了一个 Javascript 链接，但它不起作用，因为我不知道自己在做什么。

document.getElementById("ww").onclick = function () {
document.getElementById("pdfLink").href = "/products/HeywoodWhiteWove.pdf";
return false;
};

完整的 HTML：

<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta name="viewport" content="initial-scale=1.0">
<title>Heywood Envelopes</title>
<link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/css/global.css">
<link rel="stylesheet" type="text/css" href="/css/products.css">
<script type="text/javascript" src="/js/popup.js"></script>
<script type="text/javascript" src="/js/merchant.js"></script>
<script type="text/javascript" src="/js/changeLink.js"></script>
</head>

<body>
<div class="include" data-include="/header.html"></div>
<div class="wrapper">
    <div class="menu-container">
        <div class="menu-item"><a href='javascript:heywoodEnvelopes()' id="ww">Heywood White Wove</a></div>
        <div class="menu-item"><a href='javascript:heywoodMI()' id="mi">Heywood White Wove MI</a></div>
        <div class="menu-item"><a href='javascript:heywoodRemittance()' id="re">Heywood Remittance</a></div>
        <div class="menu-item"><a href="javascript:heywoodBC()" id="bc">Heywood Booklets &amp; Catalogs</a></div>
    </div>
    <div class="object-container">
        <div class="download-link">
            <span class="download-link">If your browser does not support viewing PDF's, please click<a class="download" href="#" id="pdfLink" download> HERE </a>to download a copy.</span>
        </div>
        <object class="pdf" data="/products/HeywoodWhiteWove.pdf" type="application/pdf" id="display" width="100%" height="100%"></object>
    </div>
</div>
<div data-include="/footer.html"></div>
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/js/load.js"></script>
<script>include();</script>
</body>
</html>

【问题讨论】：

您的代码示例不包含 ID 为 #pdfLink 的元素
确实如此，克里斯托夫；它在“下载链接”范围内。

标签： javascript html

【解决方案1】：

您提供的代码应该可以工作。您的页面上还有其他问题。

document.getElementById("ww").onclick = function () {
document.getElementById("pdfLink").href = "/products/HeywoodWhiteWove.pdf";
return false;
};

<div class="menu-item"><a href='javascript:heywoodEnvelopes()' id="ww">Heywood White Wove</a></div>
<div class="menu-item"><a href='javascript:heywoodMI()' id="mi">Heywood White Wove MI</a></div>
<div class="menu-item"><a href='javascript:heywoodRemittance()' id="re">Heywood Remittance</a></div>
<div class="menu-item"><a href="javascript:heywoodBC()" id="bc">Heywood Booklets &amp; Catalogs</a></div>


<span class="download-link">If your browser does not support viewing PDF's, please click<a class="download" href="#" id="pdfLink" download> HERE </a>to download a copy.</span>

【讨论】：

我把完整的 HTML 贴在上面。
Firefox 也抛出此错误：TypeError: document.getElementById(...) is null
@MichaelTuma 我猜这个javascript在changeLink.js里面？如果是这样，那就是问题所在 - 您在元素存在之前调用它。使用 jQuery/Bootstrap/etc 将该脚本移到页脚下方。
这是问题所在，但它必须与其他 Javascript 冲突，因为现在我填充 HTML 对象的调用不起作用。

【解决方案2】：

你想设置为href的字符串中有一个空格。这能解决问题吗？

【讨论】：

打错字了，我的JS没有那个空格。