首頁猿問動態更改 HTML 屬性

動態更改 HTML 屬性

JavaScript

至尊寶的傳說 2023-06-29 21:10:18

有人可以解釋一下我在哪里犯了錯誤嗎？創建一個顯示“Buy Tickets”的鏈接，其 href 屬性為“tickets.html”。創建一個顯示“升級”的按鈕。當用戶單擊“升級”時，“購買門票”鏈接 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>

查看完整描述

4 回答

PIPIONE

TA貢獻1829條經驗獲得超9個贊

首先你的結束語有一個錯字<script>，漏掉了/，應該是</script>。然后你的腳本在 DOM 完全加載之前運行。您可以將腳本放在body標記的底部，也可以使用事件包裝代碼DOMContentLoaded：

? 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>

反對回復 2023-06-29

慕尼黑的夜晚無繁華

TA貢獻1864條經驗獲得超6個贊

你的代碼運行良好。您忘記指定標簽id="upgrade"的屬性button。

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>

反對回復 2023-06-29

白豬掌柜的

TA貢獻1893條經驗獲得超10個贊

您應該使用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");

});

反對回復 2023-06-29

侃侃爾雅

TA貢獻1801條經驗獲得超16個贊

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>

反對回復 2023-06-29

4 回答
0 關注
202 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

動態更改 HTML 屬性

動態更改 HTML 屬性

4 回答

添加回答