0

I have been trying to change the a href of a branding image (in WordPress) located in the footer area with custom JavaScript, I think the image and the URL is defined here:

  <!-- !Bottom-bar -->
    <div id="bottom-bar"  role="contentinfo">
        <div class="wf-wrap">
            <div class="wf-container-bottom">
                <div class="wf-table wf-mobile-collapsed">

                    <div id="branding-bottom" class="wf-td"><a href="https://change this url.com/"><img class=" preload-me" src="default.jpg" srcset="default.jpg 240w, default.jpg 240w" width="240" height="60"   sizes="240px" alt="default" /></a></div>
                        <div class="wf-td">
                            <div class="wf-float-left">
                            </div>
                        </div>

I have tried some solutions but nothing seems to work properly.

<script>
document.getElementById("branding-bottom").href = "https://www.newpageurl.html";
</script>

In other posts, this code was successfully used to change href and the image itself but I can only see this error when I try to load the page.

Uncaught TypeError: Cannot set property 'href' of null at https://change this url.com/:366

I am thankful for every help I can get this is still somewhat new and confusing for me. Thank you!

9jq
  • 3
  • 1
  • This post might help you do that link change https://stackoverflow.com/a/179717/8306355 – Armin Jul 20 '17 at 08:15

5 Answers5

1

branding-bottom is a <div> and has no href

What you're trying to do is get the child of branding-bottom

This should work:

document.getElementById("branding-bottom").children[0].href = "https://www.newpageurl.html";


document.getElementById("branding-bottom").children[0].href = "https://www.newpageurl.html";
<div id="branding-bottom" class="wf-td">
  <a href="https://change this url.com/">link change</a>
</div>
caramba
  • 21,963
  • 19
  • 86
  • 127
  • Hey, thank you for the fast response now my custom JavaScript gives me following error: `code` Uncaught TypeError: Cannot read property 'children' of null at (index):36 – 9jq Jul 20 '17 at 08:49
  • @9jq that means the element with the id was not found. If you change the HTML you need to change the javascript selectors accordingly. – caramba Jul 20 '17 at 13:15
0

The problem is you are selecting the parent div, but you should rather select the link in order to access its .href parameter.

Concretely:

<div id="branding-bottom" class="wf-td">
    <a id="link-to-change" href="https://change this url.com/"><img class=" preload-me" src="default.jpg" srcset="default.jpg 240w, default.jpg 240w" width="240" height="60"   sizes="240px" alt="default" /></a></div>
    <div class="wf-td">
        <div class="wf-float-left">
        </div>
    </div>

Then in your script:

<script>
document.getElementById("link-to-change").href = "https://www.newpageurl.html";
</script>

Edit:

In case you get the "cannot select null element" error, check your script is runned once the html has been parsed:

<script>
document.addEventListener("DOMContentLoaded", function() { 
    // Waits for the html to be parsed
    document.getElementById("link-to-change").href="https://www.newpageurl.html";
});
</script>
Guilhem Fry
  • 326
  • 4
  • 17
  • Hello, Unfortunately, this returns the same error I had originally, thanks for trying to help me! – 9jq Jul 20 '17 at 09:06
  • Ok so you get every time a null error. Check this: is your script in your .html file ? If yes try this in your js: document.addEventListener("DOMContentLoaded", function() { // Waits for the html to be parsed document.getElementById("link-to-change").href= "https://www.newpageurl.html"; }); I updated my answer. – Guilhem Fry Jul 20 '17 at 09:15
0

Your item with the id of branding-bottom is a <div> and doesn't have an href attribute. The href attribute is on the <a> tag that is a child of it. Try 

document.querySelector('#branding-bottom > a').href = 'https://www.newpageurl.html'
hellojeffhall
  • 291
  • 3
  • 8
0

The Javascript you are using is incorrect. You need to be targeting the actual a element, not it's parent div.

<script>
    var element = document.getElementById("branding-bottom").getElementsByTagName("a")
    element[0].href= "https://www.newpageurl.html"
</script>

The code above would first get the branding-bottom Id before getting a list of a elements inside of that div. From there, we select the first result and assign the URL using the href attribute;

There is also an easier way of doing it in jQuery:

<script>
    $("#branding-bottom a").attr("href", "https://www.newpageurl.html")
</script>
Sam Bunting
  • 845
  • 1
  • 15
  • 36
  • Hey, thank you for the fast response now my custom JavaScript gives me following error: Uncaught TypeError: Cannot read property 'getElementsByTagName' of null – 9jq Jul 20 '17 at 08:55
  • @9jq [See these answers](https://stackoverflow.com/questions/23264313/uncaught-typeerror-cannot-read-property-getelementsbytagname-of-null), they may help you fix your issue. – Sam Bunting Jul 20 '17 at 09:13
0

First a huge thank you for all your help this thing is finally working now. I think you were right the script was running before the DOM. However, the newer solutions did not change the way the URL was linked. I just did not get an error when inspecting the site. In the end, a mix from 2 suggestions managed to get it working.

<script>
document.addEventListener("DOMContentLoaded", function() { 
    var element = document.getElementById("branding-bottom").getElementsByTagName("a")
    element[0].href= "https://www.google.com"
});
</script>
9jq
  • 3
  • 1
  • Glad. Then could you give a point to the answers that helped you please ? – Guilhem Fry Jul 20 '17 at 14:12
  • The solution that worked in the end was a mix of your answers. I posted a short summary of what I did and gave rep to the first person who was asking for it. Very glad for all your help, thank you. – 9jq Jul 21 '17 at 06:36