Accessing two DOM with aync await

Question

why the second .headerh1 selector throwing error as nav.js:16 Uncaught (in promise) TypeError: Cannot set property 'innerHTML' of null
at navBar (nav.js:16) code: export const navBar = async () => {
const url = "hidden";
const data = await fetch (url);
const res = await data.json();
const result = res;
console.log(result.navBar);

document.querySelector(".headerleftNav").innerHTML =
<div class="header__logo">
<div>
<img class="header__logoImg" src="${result.navBar[0].logoImg}" alt="">
</div>
</div>
;

document.querySelector(".header__h1").innerHTML =
${result.navBar[0].logoHeading};
} navBar();

Answer 1

Maybe the script is first then the actual HTML part that you want to do .innerHTML. If that's the reason, just put the script at the end of the body tag

Hope this helps : )

Answer 2

Could you link this code as project on code playground please?

Answer 3

Sandra Meyer Alexandre solved. I have updated html structure and it's working. I didn't close the parent div that's why it cannot find selector. Thank you