Prova creazione sito web in html

[sitowebpro]

Salve a tutti, ho creato in 3 ore il sito web che vedete Clicca qui soltanto che ho il seguente problema, quando clicco da dispositivo mobile sull'icona che dovrebbe far comprarire il menu mi da errore.

ho scritto quanto segue:



<link rel="stylesheet" href="css/mobile.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

di seguito il menu

<nav>
<a href="javascript:void(0)" id="mobileMenu" onclick="toggle()">☰</a>
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Tutorial</a></li>
<li><a href="#">Contatti</a></li>
</ul>
</nav>

mentre per ultimo lo script

<script>
function toggle(){
var nav = document.getElementByID("menu");
if(nav.style.display == "none"){
nav.style.display = "block";
}else{
nav.style.display = "none";
}
}
</script>

mentre il file css denominato mobile riporta quanto segue

@media screen and (max-width: 600px) {
header{
text-align: center;

}

.email{
float: none;
margin: 1%;
margin-bottom: 1%;
}

.homeheader h3{
width: 200px;
margin: auto;
text-align: center;
}

.homeheader{
height: 310px;
}

.btnyoutube{
margin: 5%;
display: block;
}

nav{
padding: 5px;
}

nav ul li{
display: block;
}

nav ul{
margin-top: 5px;
}

#mobileMenu{
text-decoration: none;
color: white;
padding: 3px;
font-size: 200%;
margin: 5px;
border: 1px solid white;
border-radius: 10px;
display: block;
}

#menu{
display: none;

}

}

ora non capisco perchè il comando:

<a href="javascript:void(0)" id="mobileMenu" onclick="toggle()">☰</a>

e l'esecuzione dello script ovvero:

function toggle(){
var nav = document.getElementByID("menu");

non funziona. Sapete spiegarmi dove sbaglio?

[alemoppo]

Invece di:

getElementByID

Devi scrivere:

getElementById

Inoltre, ti suggerirei di utilizzare addEventListener invece di "onclick=funzione". Inoltre il href puoi annullarlo con preventDefault.

Ciao!

[sitowebpro]

Grazie mille, sei stato gentilissimo, per il momento lascio tutto com'è, in caso uso i comandi che mi hai consigliato