Change HTML attributes dynamically

Question

Can somebody explain where I'm making mistake, please..!

Create a link that says “Buy Tickets” and has a href attribute of “tickets.html”.

Create a button that says “Upgrade”.

When the user clicks “Upgrade”, the “Buy Tickets” link url should change from “tickets.html” to “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>

Sounds like you are learning JavaScript. https://www.w3schools.com/js/ is a great place to learn. — Oliver, Nov 01 '20 at 06:26
Thank you Oliver yes Im learning JS so many questions and need answers for me to understand — TechBantu, Nov 01 '20 at 07:18

score 1 · Accepted Answer · answered Nov 01 '20 at 06:25

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>

score 0 · Answer 2 · answered Nov 01 '20 at 06:21

0

Like it says in this question, you should use the setAttribute(atr, value); method, something like document.getElementById("buylink").setAttribute("href", "fancy_tickets.html");. Also i suggest you to use addEventListener to listen to events such as onClick

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

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

answered Nov 01 '20 at 06:21

FLiotta

151
6

Hi Fliotta thanks for answering, i understand manipulating that href="tickets.html" attribute, with this code document.getElementById("buylink").href = "fancy_tickets.html"; **This is the part I don't understand..! Create a button that says “Upgrade”. When the user clicks “Upgrade”, the “Buy Tickets” link url should change from “tickets.html” to “fancy_tickets.html”.** – TechBantu Nov 01 '20 at 06:30
I tried it after clicking the button it is not taking me to the link fancy_tickets.html – TechBantu Nov 01 '20 at 06:54

score 0 · Answer 3 · answered Nov 01 '20 at 06:30

0

Your code works well. You forgot to specify the id="upgrade" attribute for the button tag.

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>

answered Nov 01 '20 at 06:30

s.kuznetsov

14,870
3
10
25

I tried that the button is not taking me to the link fancy_tickets.html – TechBantu Nov 01 '20 at 06:53
it works now thank you I have to add target ='_blank' to see that – TechBantu Nov 01 '20 at 07:04
glad to help.. did you need to switch to a new browser tab? – s.kuznetsov Nov 01 '20 at 07:07
its so weird this is the only way after clciking the button its taking me to fancy_tickets.html page **
** document.getElementById("upgrade").onclick = function () { document.getElementById("buylink").href = "fancy_tickets.html"; }; **but i cant see the buytickets page because target="_blank" Buy Tickets ** if i close the target attribute the button is not working – TechBantu Nov 01 '20 at 07:13
This is not the only way to go to the page. If I understood you correctly, then - https://stackoverflow.com/questions/7077770/window-location-href-and-window-open-methods-in-javascript – s.kuznetsov Nov 01 '20 at 07:22
Always glad to help – s.kuznetsov Nov 01 '20 at 07:27

Ken Lee · Answer 4 · 2020-11-01T07:29:58.483

0

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>

edited Nov 01 '20 at 07:29

answered Nov 01 '20 at 06:41

Ken Lee

6,985
3
10
29

I tried it after clicking the button it is not taking me to the link fancy_tickets.html – TechBantu Nov 01 '20 at 06:54

Change HTML attributes dynamically

4 Answers4