0

Accessing two DOM with aync await

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();

2nd Jul 2020, 1:42 PM
Ali Hussain Dhuniya
Ali Hussain Dhuniya - avatar
3 Antworten
+ 2
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 : )
2nd Jul 2020, 2:36 PM
Alexandre
Alexandre - avatar
+ 1
Could you link this code as project on code playground please?
2nd Jul 2020, 2:16 PM
Sandra Meyer
Sandra Meyer - avatar
+ 1
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
3rd Jul 2020, 2:13 PM
Ali Hussain Dhuniya
Ali Hussain Dhuniya - avatar