First of all: I'm new to coding in generel. i just started 3 months ago.
I'm setting up a website for a friend. The navbar of it should responsevely change it's html content what works fine on every device i tested. but when i try to set the innerHtml of my nav-ul with DOMContentLoaded, something goes wrong but only on the IOS Safari. unfortunately i can't use any browser developer tools on my ios safari.
Here is my app.js
document.addEventListener("DOMContentLoaded", function() {
const rect = document.querySelector(".main-container");
const screenWidth = rect.getBoundingClientRect().width;
if (screenWidth <= 800) {
document.getElementById("navbar-list").innerHTML =
`<li>
<a href="tel:xxxxx">
<img src="./vector/phone1.png" alt="" class="icon">
<p id="number">
Anrufen
</p>
</a>
</li>
<li>
<a href="whatsapp://send?text=Hallo! ich bin ein text der in einem whatsapp button programmiert ist auf peters website!&phone=xxxxx">
<img src="./vector/icons8-whatsapp.svg" alt="" class="icon">
<p>
WhatsApp
</p>
</a>
</li>`
} else {
document.getElementById("navbar-list").innerHTML =
`<li>
<a href="#home">
Home
</a>
</li>
<li>
<a href="#faecher">
Fächer
</a>
</li>
<li>
<a href="#konzept">
Konzept
</a>
</li>
<li>
<a href="#reviews">
Ergebnisse
</a>
</li>
<li>
<a href="#contact">
Kontakt
</a>
</li>`
}
});
Do i miss some await-stuff because i have to mention some async stuff?
Thanks for your help!
Can you log document.readyState inside of that callback? If it's not loading that means the event fired before the event listener was registered.