动态更改 HTML 个属性

Question

谁能解释一下我哪里出错了，拜托..！

创建一个 link，上面写着“Buy Tickets”，href 属性为“tickets.html”。

创建一个显示“升级”的按钮。

当用户点击“升级”时，“购买门票”link url应该从“tickets.html”变为“fancy_tickets.html”。

<script>
document.getElementById("upgrade").onclick = function () {
  document.getElementById("buylink").href = "fancy_tickets.html";
};
</script>

<html>
<body>
<a id="buylink" href="tickets.html">Buy Tickets</a><br>
  <button id ="upgrade">Upgrade</button>
</body>
</html>

Answer 1

如question中所述，您应该使用setAttribute(atr, value);方法，类似于document.getElementById("buylink").setAttribute("href", "fancy_tickets.html");。另外我建议你使用 addEventListener 来监听 onClick

等事件

const upgradeBtn = document.getElementById("upgrade");
const buyLink = document.getElementById("buylink");

upgradeBtn.addEventListener('click', () => {
   buyLink.setAttribute("href", "fancy_tickets.html");
});

Answer 2

首先你在结束 <script> 时有一个错字，缺少 /，应该是 </script>。那么在DOM完全加载之前你的脚本是运行。您可以将脚本放在 body 标签的底部，或者用 DOMContentLoaded 事件包裹您的代码：

<script>

  window.addEventListener('DOMContentLoaded', (event) => {
    document.getElementById("upgrade").onclick = function () {
      var el = document.getElementById("buylink");
      el.href = "fancy_tickets.html";
      console.log(el.getAttribute('href'));// log the new href value
    };
  });

</script>

<a id="buylink" href="ticket.html">Buy Tickets</a><br>
<button id="upgrade">Upgrade</button>

Answer 3

您的代码运行良好。您忘记为 button 标签指定 id="upgrade" 属性。

document.getElementById("upgrade").onclick = function () {
  document.getElementById("buylink").href = "fancy_tickets.html";
};

<a id="buylink" href="tickets.html">Buy Tickets</a><br>
  <button id="upgrade">Upgrade</button>

Answer 4

function switch1()
{  document.getElementById("buylink").href = "fancy_tickets.html";
}

<html>
<body>
<a target=_blank id="buylink" href="tickets.html">Buy Tickets</a><br>
  <button id="upgrade" onclick="javascript:switch1();">Upgrade</button>
</body>
</html>

动态更改 HTML 个属性

Change HTML attributes dynamically

html

javascript

attributes