'How am i supposed to pass the value of a slider to a javascript function?

So i'm trying to pass a value of a slider onto a javascript function, to set the volume of an audio. I'm very new to javascript so i'm not quite sure what i'm doing but Chrome complains about Uncaught TypeError: Cannot read property 'value' of null.

HTML5 code

<div class="mt-2">Volume</div>
        <div class="slidecontainer">
         <input type="range" min="1" max="100" value="50" class="slider" id="musicVolume">
         <output id="musicVolume"> </output>

Javascript code

// Create audio object
var themeAudio = new Audio()
volumeSlider = parseInt(document.getElementById("musicVolume").value );  
themeAudio.volume = volumeSlider
themeAudio.loop = true

(The javascript code is under it's own file, background.js while the HTML code is under popup.html)

javascripthtmlaudiogoogle-chrome-extensionhtml5-audio


Solution 1:[1]

You can put <script /> in the bottom on your <body> or add attribute deffer for script

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Andrii Svirskyi

Related Questions