uncaught referenceerror calculate is not defined at HTMLInputElement.onChange

The error I am getting is in the title. (uncaught referenceerror calculate is not defined at HTMLInputElement.onChange) This works if I run it along from notepad++, but when I run it within the website, I get that error. Would anyone be able to shed some light on this? Any help is appreciated.

<p style="text-align: center;"><strong>CBD %</strong></p>
<input id="box1" type="number" value="5" onchange="calculate()"/>
<p style="text-align: center;"><strong>Bottle size (ml)</strong></p>
<input id="box2" type="number" value="100" onchange="calculate()"/>
<p style="text-align: center;"><strong>Calculated value</strong></p>
<input id="result" type="number" value="500" />

<script>
    function calculate() {
        
            var myBox1 = document.getElementById('box1').value; 
        var myBox2 = document.getElementById('box2').value;
        var result = document.getElementById('result'); 
        var myResult = myBox1 * myBox2;
                
        document.getElementById('result').value = myResult;

    }
</script>

Screenshot of console: http://prntscr.com/kgaw3r