Не работает скрипт для меню

Очень простой код для JS по какой то причине не работает, по идее, должно выскакивать меню при нажатии кнопки, по факту - ничего не происходит.

JS
menu.onclick = function myFunction() {
var x = document.getElementByID('mytopnav');

if(x.className === "topnav"){
x.className += " responsive";
}
else{
x.className = "topnav";
}
}

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MyCompany</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
</head>
<body>
<header>
<div class="header-logo">MyCompany</div>
<nav>
<div class="topnav" id="mytopnav">
<a href="#">HOME</a>
<a href="#">ABOUT</a>
<a href="#">SERVICES</a>
<a href="#">PARTFOLIO</a>
<a href="#">TESTIMONIALS</a>
<a href="#">CONTACT</a>
<a href="#" id="menu" class="icon" >☰</a>
</div>
</nav>
</header>

<script src="script.js"></script>
</body>
</html>

CSS
*{
margin: 0;
padding: 0;
}

a{
text-decoration: none;
}

li{
list-style: none;
}

body{
font-family: 'Open Sans', sans-serif ;
}

header{
width: 100%;
background:#000;
display: flex;
}

.header-logo{
text-transform: uppercase;
color:#FFF;
font-weight: 800;
font-size:24px;
cursor:pointer;
margin-top:56px;
margin-left:12%;
}

nav{
margin-top:56px;
margin-left:29%;
}

.topnav a{
color:white;
text-align: center;
padding:12px 16px;
font-size:14px;
font-weight: bold;
}

.topnav a:hover{
border-bottom: 3px solid #fcac45;
}

.topnav .icon{
display:none;
}

@media screen and (max-width: 1300px){

nav{
margin-left:20%;
}
}

@media screen and (max-width: 1105px){
nav{
margin-left:10%;
}
}

@media screen and (max-width: 1010px){
.topnav a {
display:none;

}

.topnav a.icon{

float:right;
margin-top:-17px;
display:block;
color:white;
font-size: 25px;
}

nav{
width: 100%;
}

.topnav.responsive{
position:relative;
top:50px;
left:-200px;
}

header .topnav.responsive{
height: 340px;
}

.topnav.responsive a.icon{
position:absolute;
top:-50px;
right:-200px;
}

.topnav.responsive a{
float:none;
display: block;
text-align:left;

}
}