JavaScript <a> href 替换不起作用答案

【问题标题】：JavaScript <a> href replacing is not workingJavaScript <a> href 替换不起作用
【发布时间】：2020-11-20 10:55:29
【问题描述】：

我正在做一个字体下载资源网站，这是我的JS和我的一些html：

var element, text, font, download, value;

function tick() {
  element = document.getElementById("text");
  font = document.getElementById("fontfamily");
  text = document.getElementById("dummy-text");
  download = document.getElementById("downlink");
  text.innerHTML = element.value;
  text.style.fontFamily = font.value;
  value = font.value + ".tff";
  download.setAttribute("href", value);
}

<input type="text" id="text" value="Lorem ipsum dolor set amit.">
<select id="fontfamily">
  <optgroup label="Apple">
    <option>Helvetica Neue</option>
  </optgroup>
  <optgroup label="Google">
    <option>Roboto Regular</option>
    <option>Roboto Light</option>
    <option>Roboto Bold</option>
    <option>Roboto Italic</option>
  </optgroup>
  <optgroup label="Monotype">
    <option>Century Gothic</option>
  </optgroup>
  <optgroup label="Nintendo">
    <option>Wii Sans Regular</option>
    <option value="SMW">Super Mario World Sans</option>
  </optgroup>
</select><button onclick="tick()">Set Text</button>
<br><br>
<h1 id="dummy-text" style="font-family: Helvetica Neue;">Lorem ipsum dolor set amit.</h1><a href="Helvetica Neue.ttf" id="downlink"><button style="margin: 0;">Download</button></a>

但是当我按“下载”时，我去的链接是[object%20HTMLSelectElement].tff，显然不存在。

有什么帮助吗？

【问题讨论】：

标签： javascript html fonts href

【解决方案1】：

您目前遇到的问题是您正在设置属性，而不是设置 href。设置你的 href 做

let download = document.getElementById("downlink");
download.href = "https://example.com";

这应该可以解决它！

注意：我注意到您是新成员！首先，欢迎来到 StackOverflow。其次，请务必通过单击帮助您解决问题的答案旁边的复选标记来标记您的问题的答案，以便人们知道这个问题得到了答案，并且新人也可以轻松找到它！

【讨论】：

【解决方案2】：

运行 sn-p 后，我看到即使将正确的值设置为 href，当您单击 Download 按钮时，它也会得到 URL encoded。

这就是Roboto Regular 将变成Roboto%20Regular 的方式。

在<a>标签中添加download属性，指定当用户点击超链接时下载目标。

var element, text, font, download, value;

function tick() {
  element = document.getElementById("text");
  font = document.getElementById("fontfamily");
  text = document.getElementById("dummy-text");
  download = document.getElementById("downlink");
  text.innerHTML = element.value;
  text.style.fontFamily = font.value;
  value = font.value + ".tff";
  download.href = value;

}

<input type="text" id="text" value="Lorem ipsum dolor set amit.">
<select id="fontfamily">
  <optgroup label="Apple">
    <option>Helvetica Neue</option>
  </optgroup>
  <optgroup label="Google">
    <option>Roboto Regular</option>
    <option>Roboto Light</option>
    <option>Roboto Bold</option>
    <option>Roboto Italic</option>
  </optgroup>
  <optgroup label="Monotype">
    <option>Century Gothic</option>
  </optgroup>
  <optgroup label="Nintendo">
    <option>Wii Sans Regular</option>
    <option value="SMW">Super Mario World Sans</option>
  </optgroup>
</select><button onclick="tick()">Set Text</button>
<br><br>
<h1 id="dummy-text" style="font-family: Helvetica Neue;">Lorem ipsum dolor set amit.</h1><a href="Helvetica Neue.ttf" id="downlink"><button style="margin: 0;" download>Download</button></a>

【讨论】：

对于a href，您不会设置属性，而是只需设置 href，例如设置 innerHTML 或其他类似的东西。