change target attribute of link

Site URL: https://www.johncervantes.co.uk

I've made my Instagram social link (found in the site header) actually point to a gallery page on my own website. I'd like for this link to open in the same tab. I'm just a hobbyist coder and have come up with in code injection. But it's not working - is it anything to do with when the code will run?

<script>
function changeTarget() {
const instaLink = document.querySelectorAll('[href="https://www.johncervantes.co.uk/instagram"]');
instaLink.setAttribute("target", "_self");
}
  changeTarget();
</script>

Quote

is it anything to do with when the code will run?

I believe that is the issue. You can try wrapping it in the following manner.

window.addEventListener ( 'DOMContentLoaded', ( ) => {

  const selector = '[href="https://www.johncervantes.co.uk/instagram"]';
  
  const instaLink = document.querySelectorAll ( selector );
  
  instaLink.setAttribute ( 'target', '_self' );
  
  } );

Let us know how it goes.

Thanks very much for this. Unfortunately it's still not working. The error given in console is "Uncaught TypeError: instaLink.setAttribute is not a function"

So presumably it still can't find the element... Then I realised that querySelectorAll returns a NodeList of all the elements it finds? https://developer.mozilla.org/en-US/docs/Web/API/NodeList

So I'll need to iterate over all of them. I'll think about this and try tomorrow.

9 hours ago, crevice said:

Then I realised that querySelectorAll returns a NodeList of all the elements it finds? https://developer.mozilla.org/en-US/docs/Web/API/NodeList

Yep that could be an issue. Iterate, or take the zeroth node.  Or use querySelector if you're sure there is only one element.

My apologies. I was a bit rushed for time so I didn't go deep into your issue. If I have some more time I'll try again if you don't solve it before I have a chance at a second run.

Usually though the DOMContentLoaded is a good idea for most code. 😉