How can I output this function on a browser? - browser

Question

The function outputs correctly on online code editors but I am not successful in replicating the output on my browser. What's the correct way of outputting it to my browser? I have tried numerous methods. Here is the function I want to output.
function countdown(i) {
console.log(i);
if (i <= 1) { // base case
return;
} else { // recursive case
countdown(i - 1);
}
}
countdown(5); // This is the initial call to the function.
Here is my most recent attempt at output on my web browser
function countDown(i) {
document.getElementById("recursiveFuncAttempt").innerHTML = i;
if (i <= 1) {
return;
} else {
cat = countDown(i - 1);
return document.getElementById("recursiveFuncAttempt").innerHTML = cat;
}
}
countDown(5);
<div>
countdown attempt
<button onclick="countDown()">click me</button>
<p id="recursiveFuncAttempt"></p>
</div>

Answer 1

Grouping your code and the comments together...
Your original code was correct but instead of logging to the console you should add the value to the text content of a page element.
Logging the different values in the console - line by line - gives an appearance of time passing which updating the text content of a DOM element wouldn't give you. All you would see is the last digit in the sequence because the function would work faster than your eyes can see.
Therefore a a timeout is needed to pause execution for n time before calling the function again.
You can simplify the code a little by eliminating the else part of the condition.
// Cache the element
const div = document.querySelector('div');
// Add a default value to count if a value
// is not passed into the function
function countdown(count = 5) {
// If count is zero just return
if (count < 1) return;
// Otherwise update the text content
// of the cached element
div.textContent = count;
// Wait one second (1000ms), and call the function
// with a decremented count
setTimeout(countdown, 1000, --count);
}
countdown();
div { font-size: 5em; color: blue; font-weight: 700;}
<div></div>