EJS点击元素切换详情渲染报错：data未定义问题求助

你遇到的核心问题是：EJS模板变量data只存在于服务器渲染阶段，前端浏览器运行脚本时无法直接访问这个变量，同时代码里还有DOM选择器错误的问题。以下是修复步骤：

1. 把模板变量data注入前端全局作用域 #

在页面的<script>开头，将EJS的data序列化为JSON字符串，转化为前端可访问的全局变量：

// 用<%- 避免HTML转义，直接输出JSON对象
const data = <%- JSON.stringify(data) %>;
let showing = 0; // 把原来EJS里的showing移到前端统一管理

2. 简化点击事件的参数传递 #

不需要在点击事件里传data，直接传索引即可，修改列表项的onclick：

<div class="item" onclick="setShowing(this.getAttribute('key'))" key="<%= i %>">

3. 修正setShowing函数的逻辑 #

移除多余的data参数，修正DOM选择器，并确保索引是数字类型：

function setShowing(newValue) {
    console.log("updating value:", newValue);
    showing = Number(newValue); // 转成数字类型，避免字符串索引问题

    // 修正DOM选择器，对应详情区的元素
    const nameElement = document.querySelector('.item_details h2');
    const detailElement = document.querySelector('.item_details p');
    nameElement.textContent = data[showing].name;
    detailElement.textContent = `${data[showing].gender}, ${data[showing].nationality}, ${data[showing].age}`;
}

修复后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/styles/globals.css">
    <link rel="stylesheet" href="/styles/main.css">
</head>
<body>
    <div class="box grid">
        <div class="container_1">
            <% for(let i = 0; i < data.length; i++){ %>
            <div class="item" onclick="setShowing(this.getAttribute('key'))" key="<%= i %>">
                <h2><%= data[i].name %></h2>
                <p><%= data[i].gender %>, <%= data[i].nationality %>, <%= data[i].age %></p>
            </div>
            <% } %>
        </div>
        <div class="container_2">
            <div class="item_details">
                <h2><%= data[0].name %></h2> <!-- 直接用0初始化，和前端showing初始值保持一致 -->
                <p><%= data[0].gender %>, <%= data[0].nationality %>, <%= data[0].age %></p>
            </div>
        </div>
    </div>
    <script>
        const data = <%- JSON.stringify(data) %>;
        let showing = 0;

        function setShowing(newValue) {
            console.log("updating value:", newValue);
            showing = Number(newValue);

            const nameElement = document.querySelector('.item_details h2');
            const detailElement = document.querySelector('.item_details p');
            nameElement.textContent = data[showing].name;
            detailElement.textContent = `${data[showing].gender}, ${data[showing].nationality}, ${data[showing].age}`;
        }
    </script>
</body>
</html>

关键说明 #

• 服务器渲染时，EJS的<%- JSON.stringify(data) %>会把服务器端的data数组转化为前端可识别的JS对象，存到全局变量data里。
• 原来的.item_2 .item选择器是错误的，应该对应详情区的.item_details元素。
• 使用textContent代替innerHTML更安全，避免XSS风险。

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