I'm attempting to call two different APIs by clicking a button to display a random joke on the screen. I've created two separate functions to fetch the APIs and used Math.random() to generate a random number. If the number is greater than 50, one function is executed; otherwise, the other function is called. However, I'm encountering an issue where the Chuck Norris API data always returns Undefined, and I'm struggling to identify the mistake.
Below is my JavaScript code:
const button = document.getElementById("button");
const joke = document.getElementById("joke-content");
const url = "https://icanhazdadjoke.com/";
const urlChuck = "https://api.chucknorris.io/jokes/random";
button.addEventListener("click", getJoke = () => {
const randomNumber = 100 * Math.random();
return randomNumber > 50 ? getDadJoke() : getChuckJoke();
}
);
const getDadJoke = () => {
fetch(url, {
headers: {
"Accept": "application/json"
}
}).then(response => response.json())
.then(data => joke.innerHTML = data.joke)
}
const getChuckJoke = () => {
fetch(urlChuck, {
headers: {
"Accept": "application/json"
}
}).then(response => response.json())
.then(data => joke.innerHTML = data.joke)
}