0

I'm new to coding and have no idea what I'm doing. This is my js for a very simple audio slider next to a video.

<script type="text/javascript">        
    var video = document.getElementById('video1');
    var volumecontrol = document.getElementById('volume1');
    var setVolume = function() {
        video.volume = this.value / 100;
    };
    volumecontrol.addEventListener('change',setVolume);
    volumecontrol.addEventListener('input',setVolume);
</script>

Here is the relevant HTML code.

<div class="video">
        <video controls autoplay muted loop id="video1"><source src="video.mp4" type="video/mp4"></video></div>
<div class="slidecontainer">
        <input type="range" oninput="setVolume(this.value)" onchange="setVolume(this.value)" min="1" max="100" value="1" step="1" class="slider" id="volume1"></div>

The error I get in the console looks like this:

Uncaught TypeError: Cannot read property 'addEventListener' of null at volumecontrol.addEventListener('change',setVolume);

Help pls...

korbb
  • 1
  • 2
  • this refers to the global object. What is the value of this.value? – Toby Harnish May 21 '21 at 16:33
  • I'm not sure. I don't really know what I'm doing, I've just been copying random bits of code hoping it works out. Should I have a number instead of "this.value"? – korbb May 21 '21 at 16:36

2 Answers2

0

Is your <script> </script> inside the <head> </head> tag, Because if the script loaded before the html, document.getElementById('volume1') will be null

Cannot read property 'addEventListener' of null error

Liquid-Oxygen
  • 1
  • 3
0

LMAO. Okay. I had the muted tag on the video active. Lol... Disregard my stupidity, thank you.

I added the following code to allow for autoplayed-muted.

var unmute = function() {
        video.muted = false;
    }
volumecontrol.addEventListener('change',unmute);
volumecontrol.addEventListener('input',unmute);
korbb
  • 1
  • 2