动态更改 HTML 属性
有人可以解释一下我在哪里犯了错误吗？
创建一个显示“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>
至尊宝的传说浏览 173回答 4
4回答
-
PIPIONE
首先你的结束语有一个错字<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> -
慕尼黑的夜晚无繁华
你的代码运行良好。您忘记指定标签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> -
白猪掌柜的
您应该使用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");}); -
侃侃尔雅
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>
随时随地看视频慕课网APP
相关分类
JavaScript