Html Question posted in
Some basic documentation can be found here.

How can I replace a location.href link using JavaScript?

I have lots of page with button. I want to replace some specific links with another link.
Here is the HTML code

<button onclick="changeURL()">change link</button>
<button onclick="location.href='https://google.com'" id="link">go to link</button>

I tried to add this script but it’s not working.

<script>
   function changeURL(){
        var newURL = "https://youtube.com";
        document.getElementById("link").href = newURL;
    }
</script>
Tags:

3

Answers


  1. 0

    This is good code.

    Perhaps getElementById(link) does not exist.

    Login or Signup to reply.
  2. 0

    The Problem i see is that you try to change the value of href, but the Button dont supports hrefs.

    try this:

    function changeURL() {
  var newURL = "https://youtube.com";
  document.getElementById("link").onclick = window.location.href = newURL;
}
    <button onclick="changeURL()">change link</button>
<button onclick="location.href='https://google.com'" id="link">go to link</button>

    If you have many buttons with different ids you can wrote the name in your function, like this:

    function changeURL(link) {
  var newURL = "https://youtube.com";
  document.getElementById(link).onclick = window.location.href = newURL;
}
    <button onclick="changeURL('link1')">change link</button>
<button onclick="location.href='https://google.com'" id="link1">go to link</button>
    Login or Signup to reply.
  3. 0

    If there are lots of buttons on a page that need to have their intended target modified perhaps the following will be of interest. You cannot have duplicate ID attributes and expect any Javascript code that uses the ID to behave correctly. You could modify that ID and make it a dataset property, such as data-id='link' and that is perfectly valid and makes sense when trying to identify more than one element as shown below.

    The button that is used to change the target of the buttons calls document.querySelectorAll to identify any/all buttons with the data-id property and then iterates through that nodelist to modify the event handler assigned to each button.

    I added the data-name attribute only to indicate different buttons – it plays no part in the modification code

    const _url_='https://www.youtube.com/watch?v=dQw4w9WgXcQ';

const go_to_youtube=(evt)=>{
  evt.preventDefault();
  console.log( 'Navigating to: %s', _url_ );
  return document.location.href=_url_;
}

document.addEventListener('click',e=>{
  if( e.target instanceof HTMLButtonElement && e.target.dataset.type=='change' ){
    document.querySelectorAll('button[data-id="link"]').forEach(n=>{
      n.addEventListener('click', go_to_youtube );
    })
  }
});
    div > button{display:block}
button{margin:0.25rem;padding:0.25rem}
button[data-id='link']:after{margin:0 0 0 0.25rem;color:red;content:attr(data-name)}
    <button data-type='change'>Change links</button>
<div>
  <button data-name='google' onclick="location.href='https://google.com'" data-id="link">go to link</button>
  <button data-name='yahoo' onclick="location.href='https://yahoo.com'" data-id="link">go to link</button>
  <button data-name='askjeeves' onclick="location.href='https://askjeeves.com'" data-id="link">go to link</button>
  <button data-name='microsoft' onclick="location.href='https://microsoft.com'" data-id="link">go to link</button>
  <button data-name='facebook' onclick="location.href='https://facebook.com'" data-id="link">go to link</button>
  <button data-name='tiktok' onclick="location.href='https://tiktok.com'" data-id="link">go to link</button>
  <button data-name='example' onclick="location.href='https://example.com'" data-id="link">go to link</button>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search