tengo un problema con el javascript, más exactamente con la propiedad .classList.toggle En teoría estoy definiendo bien los objetos, pero a la hora de hacer click, una vez compilado, en la pagina me salta el siguiente error: TypeError: Cannot read properties of null (reading 'classList') Y no se el porque. He buscado y no he encontrado una respuesta, en la Api de javascript se encuentra la propiedad, así que no creo que sea porque ha sido eliminada, pero si hubiera sido eliminada ¿Cómo se haría? ¿Hay algo que haya que incluir y me este comiendo? O simplemente no estoy definiendo los objetos de forma que sepa al objeto al que me refiero.
body {
background-image: url("https://64.media.tumblr.com/bd1b0d977b3e43cc5645297d5322662c/tumblr_ndyybljlWc1rvnh7zo1_r1_500.gif");
overflow: hidden;
height: 100vh;
background-size: cover;
background-position: center;
}
/* Centrar elemento dentro de main */
.main {
position: absolute;
margin: auto;
left: 0; right: 0;
top: 0; bottom: 0;
width: 1404px/*550px*/;
height: 658px/*315px*/; line-height: 50px; /* Con «line-height» con el mismo valor numérico de la altura centras horizontalmente el texto */
}
.video{
width: 1370px;
height: 770px;
}
.navigation{
position: fixed;
inset: 20px 0 20px 20px;
width: 75px;
background-color: aquamarine;
}
.navigation.open{
width: 250px;
}
.navigation .menuToggle{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 60px;
border-bottom: 1px solid rgba(0, 0, 0, 0.25);
cursor: pointer;
display: flex;
align-items: center;
justify-content: flex-start;
padding: 0 23px;
}
.navigation .menuToggle ::before{
content: '';
position: absolute;
width: 30px;
height: 2px;
background: #333;
transform: translateY(-8px);
transition: 0.5s;
}
.navigation.open .menuToggle ::before{
transform: translateY(0px) rotate(45deg);
}
.navigation .menuToggle ::after{
content: '';
position: absolute;
width: 30px;
height: 2px;
background: #333;
transform: translateY(8px);
transition: 0.5s;
box-shadow: 0 -8px 0 #333;
}
.navigation.open .menuToggle ::after{
transform: translateY(0px) rotate(-45deg);
box-shadow: 0 0 0 #333;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/estilo1.css">
<link href="https://fonts.googleapis.com/css?family=Spectral+SC:400,600" rel="stylesheet">
<title>Prueba</title>
</head>
<body>
<div class="navigation">
<div class="menuToggle">
<ul>
</ul>
</div>
</div>
<script>
const menuToggle = document.querySelector('.menuToggle');
const navigation = document.querySelector('.navigator');
menuToggle.onclick = function(){
navigation.classList.toggle('open')
}
</script>
<div class="main">
<iframe class="video" width="560" height="315" src="" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</body>
</html>
.navigator
dentro de su querySelector, la cual no existe en tu código.