javascript - 将js变量插入html href标签

Question

本质上，尝试将不同的(字符串)值传递给变量

if (result == "A")
        finalLink.push("https://pool.wikitolearn.org/images/pool/d/d0/Not-giant-enough-letter-a.jpg");
if (result == "B")
        finalLink.push("https://img.clipartfest.com/a354883c247102b05c1657698b7bc8ed_-letters-b-23-b-boyjpg-the-letter-b-clipart_205-257.jpeg");
if (result == "C")
        finalLink.push("http://dailydropcap.com/images/C-9.jpg");

然后将变量发送到html href标签

<a id="button" href="finalLink">Click me to be redirected to your answer</a>

不太了解 JavaScript，但在 PHP 中你可以通过添加 {{variableHere}} 来做到这一点

Answer 1

Javascript 的运行方式不同。当您执行您建议的操作时，您仍在服务器上并生成将发送到浏览器的 HTML。

当您使用 Javascript 尝试相同的操作时，HTML 已经交付并且必须在运行时进行操作。

为此，您需要选择要修改的元素(在本例中使用document.getElementById()很容易，因为您的链接实际上有一个id)，然后使用 DOM API 方法 DOMelement.setAttribute(attributename, value)。

var finalLink, result;
var button = document.getElementById("button");

// example: result = "A"
result = "A";

function adjustLink() {
  switch(result) {
      case "A": 
        finalLink = "https://pool.wikitolearn.org/images/pool/d/d0/Not-giant-enough-letter-a.jpg"; 
        break;
      case "B":
        finalLink = "https://img.clipartfest.com/a354883c247102b05c1657698b7bc8ed_-letters-b-23-b-boyjpg-the-letter-b-clipart_205-257.jpeg"; 
        break;
      case "C":
        finalLink = "http://dailydropcap.com/images/C-9.jpg"
        break;
      default:
  }
  button.setAttribute("href", finalLink);
}

<a id="button" onclick="console.log(this.getAttribute('href')); return false;">Link</a>
<!-- return false; makes sure the link target is not followed (use only for this demo code) -->
<button onclick="result = 'A'; adjustLink();">Set result = "A"</button>
<button onclick="result = 'B'; adjustLink();">Set result = "B"</button>
<button onclick="result = 'C', adjustLink();">Set result = "C"</button>