Javascript/jQuery I can't stop time with setTimeout, error find variable

I use setTimeout to create a time countdown of 5 seconds (it works), but I want to stop the setTimeout with Button Stop, but I have an error finding the variable.

What is the error?

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

function newTime(ob) {
	
	if(ob==undefined){
		const myTimeout = setTimeout(myGreeting, 5000);
        console.log("Start>");
    }
	if(ob=="stop"){
    	if(myTimeout==true){
    		clearTimeout(myTimeout);
        	console.log("Stop>");
        }
    }
    
}

function myGreeting() {
  document.getElementById("demo").innerHTML = "Happy Birthday!"
}

function myStopFunction() {
  newTime("stop");
}

<!-- language: lang-html -->

<h1>The Window Object</h1>
<h2>The setTimeout() and clearTimeout() Methods</h2>

<p>Click "Stop" to prevent myGreeting() to execute. (You have 5 seconds)</p>

<button onclick="myStopFunction()">Stop!</button>
<button onclick="newTime()">new Time Start</button>

<h2 id="demo"></h2>

<!-- end snippet -->

You will want to move the declaration outside of your newTime function as the scope was limited to just that first call of newTime. Also use let and not const.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

let myTimeout;

function newTime(ob) {
    
    if(ob==undefined){
        myTimeout = setTimeout(myGreeting, 5000);
        console.log("Start>");
    }
    if(ob=="stop"){
        if(myTimeout==true){
            clearTimeout(myTimeout);
            console.log("Stop>");
        }
    }
    
}

function myGreeting() {
  document.getElementById("demo").innerHTML = "Happy Birthday!"
}

function myStopFunction() {
  newTime("stop");
}

<!-- language: lang-html -->

<h1>The Window Object</h1>
<h2>The setTimeout() and clearTimeout() Methods</h2>

<p>Click "Stop" to prevent myGreeting() to execute. (You have 5 seconds)</p>

<button onclick="myStopFunction()">Stop!</button>
<button onclick="newTime()">new Time Start</button>

<h2 id="demo"></h2>

<!-- end snippet -->

That's because const and let variables are block-scoped. In your case, you declared myTimeout inside the if block, so the myTimeout variable will only be available inside that if block.

To illustrate this better:

1) This will give you a variable not defined error

if (true) {
    let foo = 'ok'; 
}
console.log(foo);

2) This won't:

let foo;
if (true) {
    foo = 'ok'; 
}
console.log(foo);

Also, you'll have to declare your variable outside your function, otherwise you won't have access to the value assigned to it on the previous call.

• Avoid the use of inline HTML on* JS handler attributes. Use Element.addEventListener() instead
• Create an Object (singleton) timer with the desired properties and methods like timer.start(fn) and timer.stop()
• don't forget to assign the timeoutId to a variable (timer.tOut) and to clear it when needed.
• Create a greet function and pass it

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const timer = {
  time: 5000,
  tOut: null,
  stop(callback) {
    callback?.();
    clearTimeout(this.tOut);
    console.log("Stopped");
  },
  start(callback) {
    this.stop(); // Stop ongoing timeout (if there's any)
    this.tOut = setTimeout(callback, this.time);
    console.log("Started!");
  }
};

// Use like:
const elDemo = document.querySelector("#demo");
const elStart = document.querySelector("#timer-start");
const elStop = document.querySelector("#timer-stop");

elStart.addEventListener("click", () => {
  timer.start(() => {
    elDemo.setHTML("Happy birthday!");
  });
});

elStop.addEventListener("click", () => {
  timer.stop(() => {
    elDemo.setHTML("");
  });
});

<!-- language: lang-html -->

<button type="button" id="timer-start">Start New</button>
<button type="button" id="timer-stop">Stop!</button>
<h2 id="demo"></h2>

<!-- end snippet -->