Company logo
  • Jobs
  • Bootcamp
  • About Us
  • For professionals
    • Home
    • Jobs
    • Courses
    • Questions
    • Teachers
    • Bootcamp
  • For business
    • Home
    • Our process
    • Plans
    • Assessments
    • Payroll
    • Blog
    • Calculator

0

135
Views
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>
7 months ago · Juan Pablo Isaza
1 answers
Answer question

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 :)

7 months ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post job Plans Our process Sales
Legal
Terms and conditions Privacy policy
© 2023 PeakU Inc. All Rights Reserved.