• Empleos
  • Bootcamp
  • Acerca de nosotros
  • Para profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
    • Bootcamp
  • Para empresas
    • Inicio
    • Nuestro proceso
    • Precios
    • Pruebas
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

148
Vistas
Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') in javaScript

I am using javaScript to handle play and pause button when user click on play pause button, but it is not working in my case it throw following error in my console when click on play buttonUncaught TypeError: Cannot read

properties of null (reading 'addEventListener')
    at myMusic.js:46:12

Here is my handle play pause function

let audioElement = new Audio('song/Si Tu Te Vas.mp3');
let masterPlay = document.getElementById('masterPlay');
/**Handle play pause click*/
masterPlay.addEventListener('click', () => {
    if (audioElement.pause() || audioElement.currentTime <= 0) {
        audioElement.play();
        masterPlay.classList.remove('fa-play-circle');
        masterPlay.classList.add('fa-pause-circle');
        gif.style.opacity = 1;
    } else {
        audioElement.pause();
        masterPlay.classList.remove('fa-pause-circle');
        masterPlay.classList.add('fa-play-circle');
        gif.style.opacity = 0;
    }
})

Mymusic.html

<script type="text/javascript" th:src="@{/js/myMusic.js}"></script>
<div class="icons">
        <!--Font awsome icon -->
        <i class="fas fa-3x fa-backward" id="previous"></i>
        <i class="far fa-3x fa-play-circle" id="masterPlay"></i>
        <i class="fas fa-3x fa-forward" id="next"></i>
    </div>
9 months ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

Place the <script> tag after the <div class="icons">

Scripts cannot get DOM content loaded after it

Or you could wrap your javascript in:

window.addEventListener('DOMContentLoaded', () => {
   // Your code here
})

To wait for the DOM content all loaded in before the script :)

9 months ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar empleo Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2023 PeakU Inc. All Rights Reserved.