从JSON文件提取信息至网站仅显示首个结果的技术问题

我明白你现在的困扰——明明创建了多个展示容器，但只有第一个有内容，剩下的都是空的。咱们来拆解问题出在哪，然后一步步修复：

问题核心分析 #

你的代码里有两个关键问题：

1. fnc函数硬绑定了hl1元素：不管循环多少次，都一直在给第一个<p>标签赋值，后面创建的hl2、hl3完全没被用到。
2. 容器创建和数据填充的循环脱节：你先循环创建了所有容器，再循环填充数据，但填充时根本没对应到新创建的容器上，而且容器创建的字符串拼接还没闭合标签（<p>标签没写</p>）。

修复后的完整代码 #

前端代码

<head>
    <!-- Title and Extern files -->
    <title>SSL Checker</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script type="text/javascript" src="js/db.json"></script>
</head>
<body>
    <div id="header">
        <h2>SSL Checker</h2>
    </div>
    <div id="form">
        <p>Introduce the URL:</p>
        <input id="txtbx" type="text">
        <button type="submit" onClick="agregar_caja()">Send</button>
        <div id="inf">
            <!-- 初始容器可以去掉，让循环动态生成所有 -->
        </div>
        <script>
            // 修改fnc函数，动态接收元素ID和数据
            function fnc(elementId, info) {
                document.getElementById(elementId).innerHTML = info.url;
            }

            // 修改容器创建函数，返回生成的元素ID，同时闭合标签
            function agregar_caja(index) {
                const elementId = "hl" + (index + 1);
                document.getElementById("inf").innerHTML += `<p type="text" id="${elementId}"></p><br>`;
                return elementId;
            }

            // 合并循环：一次完成容器创建和数据填充，避免错位
            for (let i = 0; i < MyJSON.length; i++) {
                const currentId = agregar_caja(i);
                fnc(currentId, MyJSON[i]);
            }
        </script>
    </div>
</body>

对应的db.json（注：你当前写法是JS变量而非标准JSON，若要改为标准JSON，需去掉var MyJSON =，且所有属性名、字符串都用双引号）

var MyJSON = [{ 
    "url": "google.es"
}, { 
    "url": "yahoo.com"
}]

关键修改点说明 #

• 动态绑定容器ID：让每个数据项对应一个唯一的<p>标签ID，不再硬编码hl1。
• 合并循环逻辑：把创建容器和填充数据放在同一个循环里，确保每一条数据都能找到对应的容器。
• 修复标签语法：原来的容器创建代码没闭合<p>标签，现在补上了，避免HTML结构错误。
• 规范变量声明：给循环变量i加上let，避免全局变量污染。

另外，你的Send按钮绑定的agregar_caja()函数目前还没处理输入框逻辑，如果之后要添加手动输入URL并展示的功能，可以在函数里获取输入框的值，再生成新容器并填充内容哦。

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