How to copy the href attribute from one element to another?

[NVB (Nicholas Van Beylen)]

So, it’s actually fairly simple but for some reason, I still can’t get this to work. I’m obviously missing something. I tried working with ID’s, Classnames, find(), and children() but nothing was successful.

As you can see in the image below, I want the buttons at the bottom to copy the ‘href’ attribute from the buttons at the top.

This is the code I use:

<script>

$('.prev-cms-btn').attr('href', $('.prev-next-content--previous').find('a').attr('href'));
$('.next-cms-btn').attr('href', $('.prev-next-content--next').find('a').attr('href'));

</script>

Furthermore, I made a short video explaining the problem and the solution. Feel free to watch this.

If you decide to have a look at the ‘read-only’ link: you can find this situation on the collection template page: ‘chefs template’

---

Here is my site Read-Only: (https://preview.webflow.com/preview/northseachefs?utm_medium=preview_link&utm_source=designer&utm_content=northseachefs&preview=930548968d2b963942019a61b08eb707&pageId=62a9d9f6f06f32828a2d35d7&itemId=62a9d9f6f06f3225c62d374e&workflow=preview)

Live link: https://northseachefs.webflow.io/chefs/tom-bossuyt

[NVB (Nicholas Van Beylen)]

This is the code that worked for me:

<script>

window.onload = function() {
    const value1 = document.getElementById("prev-next-content--previous").querySelector('a').getAttribute("href");
    const value2 = document.getElementById("prev-next-content--next").querySelector('a').getAttribute("href");
    document.getElementById("prev-cms-btn").setAttribute("href",value1);
    document.getElementById("next-cms-btn").setAttribute("href",value2);

};

</script>

Important: Run this code after the page is done loading. Otherwise, you’ll get this error: " Uncaught TypeError: Cannot read property ‘getAttribute’ of null"