js audio slider for video not responding to any input

Question

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...

Answer 1

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