如何解决调用数组中函数在div显示数据时出现undefined的问题？

问题出在哪 #

你写的skip函数里执行了textContent.innerHTML = f();——但first、third、four、five这些函数没有返回值，JS中无返回值的函数默认返回undefined，这就导致把undefined赋值给了div的innerHTML，自然显示出这个值。另外second函数是直接往div里追加内容，结果转头又被f()的返回值（undefined）覆盖，同时因为用了innerHTML +=，反复点击还会造成内容重复叠加。

怎么改 #

核心思路是统一逻辑：让每个函数返回要展示的内容字符串，再统一赋值给div的innerHTML，不在函数内部直接操作DOM。

修改后的完整代码

const textContent = document.getElementById("textContent");
const next = document.getElementById("next");
const prev = document.getElementById("prev");

const array = [
    "They both die at the end",
    "What if it's us",
    "Tuesday with Morrie",
    "Second life of Ove",
    "Flowers for Algernon",
    "The Minds of Billy Milligan",
    "The Fifth Sally",
    "The Touch",
    "Adele",
    "The Girl Before"
];

function first(){
    console.log("1");
    return ""; // 返回空字符串，避免div显示undefined
};
function second(){
    console.log("展示书籍列表");
    // 用map拼接每一项，再join成完整字符串返回
    return array.map(book => `${book}<br>`).join('');
};
function third(){
    console.log("3");
    return "";
};
function four(){
    console.log("4");
    return "";
};
function five(){
    console.log("5");
    return "";
};

const functions = [first, second, third, four, five];

let number = 0; // 加let声明变量，避免全局污染

function skip() {
    // 先处理边界越界情况
    if(number > functions.length - 1){
        number = 0;
    } else if(number < 0){
        number = functions.length - 1;
    }
    const f = functions[number];
    // 把函数返回的内容赋值给innerHTML
    textContent.innerHTML = f();
}

next.addEventListener("click", () => {
    number += 1;
    skip();
})

prev.addEventListener("click", () => {
    number -= 1;
    skip();
})

关键改动点

1. 给first、third这类仅做控制台打印的函数添加return "";，确保调用后不会返回undefined。
2. 重构second函数：不再直接修改div的innerHTML，而是返回拼接好的书籍列表字符串，交给skip统一处理。
3. 给number添加let声明，避免变量暴露到全局作用域引发潜在问题。
4. 优化skip里的条件判断逻辑，用else if让边界处理更清晰。

内容的提问来源于stack exchange，提问作者LittleRockStar