Function is not defined even though it is

Question

I am coding a taximeter which is calculating the drive-expenses through the elapsed time. By clicking a button the standing below function "startDrive" will normally executed, but when I am clicking on my button the browser or console respectively is showing an error which is including the message "Uncaught ReferenceError: startDrive is not defined at HTMLButtonElement.onclick (time.html:15:62)". I checked whether I mentioned the wrong Function in the "onclick" part in HTML but this is not the case. What I am doing wrong?

//global variables
let y = 3.9;
let reversal = 20;


//Main-function in which the sub-functions are be executed
function startDrive() {
    document.getElementById('output1').innerHTML = y.toFixed(2) + "€";
    interval();
}

//Calculating drive-expenses
function calculate() {
    if(y < reversal) {
    y += 0.14375;
    }
    else if(y > reversal) {
        y += 0.103125;
    }
    document.getElementById('output1').innerHTML = y.toFixed(2) + "€";
    
}

//Fixed time in which "calculate()" will be executed
function interval() {
    timerId = setInterval(calculate, 5000);
}

//Stopping interval
function stop() {
    clearInterval(timerId);
}

<button onclick = "startDrive()">start!</button>
<output id = "output1"></output>

Answer 1

here

<button onclick = "startDrive">start!</button>

use startDrive() instead of startDrive

you can watch a sample at here .

Answer 2

It says startDrive is not defined, so it seems your function definitions are never executed.

If you put your code in a plain script tag inside head it works just fine:

https://codesandbox.io/s/great-joana-ubttg5?file=/index.html