change html attributes dynamically

First of all you have a typo in closing <script>, missing /, should be </script>. Then your script is running before the DOM is fully loaded. You can either place the script at the bottom of the body tag or wrap your code with DOMContentLoaded event:

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

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top