调用ICNDB API获取随机Chuck Norris笑话时控制台重复输出问题求助

Hey there! Let's break down why your console is spitting out all three jokes repeatedly, and get your code working cleanly.

What's Causing the Issue? #

Looking at your JavaScript, two key problems are at play:

1. Redundant For Loop: You're requesting exactly 3 jokes, then looping through the 3-item result.value array. But inside the loop, you're repeatedly grabbing the same three jokes (indexes 0, 1, 2) and printing them every iteration. That means your loop runs 3 times, each time printing all three jokes—leading to duplicate logs.
2. Incorrect Error Handling Syntax: You used a comma after your second .then() instead of a .catch() method. This means your error handler won't actually trigger if something goes wrong with the fetch request.

Fixed JavaScript Code #

Here's the cleaned-up version of your code, with explanations of the changes:

document.getElementById('jokeBtn').addEventListener('click', function () {
    // Fetch the 3 random jokes
    fetch("http://api.icndb.com/jokes/random/3")
        // Parse the JSON response
        .then(res => res.json())
        // Process the joke data
        .then(function (result) {
            // Loop through each joke once, assign to corresponding DOM element
            result.value.forEach((jokeEntry, index) => {
                const jokeElement = document.getElementById(`j${index + 1}`);
                if (jokeElement) {
                    jokeElement.innerHTML = jokeEntry.joke;
                    // Log each joke once with a clear label
                    console.log(`Joke ${index + 1}: ${jokeEntry.joke}`);
                }
            });
        })
        // Properly catch and log errors
        .catch(error => {
            console.error("Oops, failed to fetch jokes:", error);
        });
})

Key Improvements #

• Removed redundant loop repetition: Instead of manually grabbing each index 3 times, we use forEach to iterate through the joke array once, handling each joke exactly once.
• Fixed error handling: Using .catch() ensures any network issues or API errors are properly logged.
• Cleaner variable usage: We no longer need separate jokes, jokes2, jokes3 variables—we directly assign the joke text to the DOM element as we loop.
• Clearer console logs: Each log is labeled with the joke number, making debugging easier.

If you prefer a more explicit approach without forEach, you can simplify your original code like this:

document.getElementById('jokeBtn').addEventListener('click', function () {
    fetch("http://api.icndb.com/jokes/random/3")
        .then(res => res.json())
        .then(function (result) {
            // Assign each joke directly, no loop needed
            document.getElementById("j1").innerHTML = result.value[0].joke;
            document.getElementById("j2").innerHTML = result.value[1].joke;
            document.getElementById("j3").innerHTML = result.value[2].joke;
            
            // Log each joke once
            console.log(result.value[0].joke);
            console.log(result.value[1].joke);
            console.log(result.value[2].joke);
        })
        .catch(error => {
            console.error("Error fetching jokes:", error);
        });
})

Either version will fix your console logging issue and work reliably!

内容的提问来源于stack exchange，提问作者Chanelle Bösiger