Sono riuscito a far apparire un cubo rosso premendo un bottone, ma prima di premerlo non c'è il cubo verde. Come posso fare?

codice:
<html><head>
<title>Pizzeria Il Fornaio</title>
<style>
body{font-family: sans-serif; background-color: #FFEBCD; background-image: url(sfondo3.png); background-position: center; background-repeat: no-repeat;}


nav{z-index:2; background: #000; height: 52px; width: 100%; position: fixed; top: 0; left: 0;}


nav ul{list-style: none; margin: 0 auto; padding: 0; width: 100%; max-width: 1200px;}


nav ul ul{display: none; position: absolute; top: 100%; left: 0; width: 100%;}


nav ul li{position: relative; float: left; width: 25%; text-align: center;}


nav ul li:hover ul{display: block;}


nav ul li li{position: relative; float: none; width: 100%; border: none;}


nav ul li a{ display: block; text-decoration: none; color: #ffffff; padding: 15px 25px; font-size: 1.2em; box-sizing: border-box; border-right: solid 2px #000; border-left: solid 2px #000;}


nav ul ul li a{font-size: 1rem; border-bottom: solid 2px #000;}


nav ul ul li:first-child a{border-top: solid 2px #000;}


nav ul li:hover a{background: #FFF; color: #000; text-decoration: none; transition: 0.5s;}


nav ul li li:hover a{background: #000; color: #FFF;}
.red {
background: #ff0000;
margin-right: 100px;
margin-top: 200px;
width: 100px;
height: 100px;
}
.green {
background: ##00FF00;
margin-right: 100px;
margin-top: 200px;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
  <header>
            <nav>
            
                <ul>
                    <li><a href="Homepage.html">HOME</a></li>
                    <li><a href="Chisiamo.html">CHI SIAMO</a>
					<ul>
					<li><a href="Dovesiamo.html">DOVE SIAMO</a></li>
					</ul>
					</li>
                    <li><a href="Menu.html">MENU'</a>
					</li>
					<li><a href="Prenotazioni.html">PRENOTAZIONI</a></li>					
                </ul>
		    </nav>
    </header>
	<p>Click the "Try it" button to toggle between adding and removing the "mystyle" class name of the DIV element:</p>


<button onclick="myFunction()">Try it</button>


<div id="myDIV">
<img src="cube.png" class="green">
</div>


<script>
function myFunction() {
   var element = document.getElementById("myDIV");
   element.classList.toggle("red");
}
</script>


	
</body>
</html>