我有 JS 列表函数，在使用内联脚本时有效，但在 HTML 和 JS 位于单独的文件中时无效

如何解决我有 JS 列表函数，在使用内联脚本时有效，但在 HTML 和 JS 位于单独的文件中时无效

我确定这个问题之前已经出现过，对此深表歉意。简而言之，我有一个带有 JS 内联脚本的 HTML 文件，效果很好，但是当我将 HTML 和 JS 分成 2 个不同的文件（在同一文件夹中）时，它停止工作，我真的不知道为什么。>

lstore.html（HTML 和 JS）

<body>
        <h2 id="title">Local Storage - JS</h2>
        <fieldset>
            <legend>Insert Accounts</legend>
            <input id="insKey" type="text" placeholder="Enter Site...">
            <input id="insValue1" type="text" placeholder="Enter Username...">
            <input id="insValue2" type="text" placeholder="Enter Password...">
            <input id="insValue3" type="text" placeholder="Enter Extra Details...">
            <button type="button" id="btnInsert">Add New Profile</button>
        </fieldset>
        <fieldset>
            <legend>Local Storage</legend>
            <div id="LSout"></div>
        </fieldset>
    </body>

    <script type="text/javascript">
        const insKey = document.getElementById('insKey');
        const insValue1 = document.getElementById('insValue1');
        const insValue2 = document.getElementById('insValue2');
        const insValue3 = document.getElementById('insValue3');
        const btnInsert = document.getElementById('btnInsert');
        const LSout = document.getElementById('LSout');

        btnInsert.onclick = function () {
            const key = insKey.value;
            const value1 = insValue1.value;
            const value2 = insValue2.value;
            const value3 = insValue3.value;

            if (key && value1) {
                localStorage.setItem(key,[value1,value2,value3]);
                location.reload();
            }
        };

        for (let i = 0; i < localStorage.length; i++) {
            const key = localStorage.key(i);
            const value1 = localStorage.getItem(key);
            const value2 = localStorage.getItem(key);
            const value3 = localStorage.getItem(key);

            LSout.innerHTML += `
            <tr>
                <td>${key}:</td>
                <td>${value1}</td> <br />`;
        }

    </script>

</html>

仅.html

    <head>
        <title>Local Storage</title>
        <script type="text/javascript" src="only.js"></script>

        <style media="screen">
            input,button {
                padding: 7px;
                height: 40px;
            }

            fieldset {
                margin-bottom: 25px;
            }

        </style>
    </head>
    <body>
        <h2 id="title">Local Storage - JS</h2>
        <fieldset>
            <legend id="subForm">Insert Accounts</legend>
            <input id="insKey" type="text" placeholder="Enter Site...">
            <input id="insValue1" type="text" placeholder="Enter Username...">
            <input id="insValue2" type="text" placeholder="Enter Password...">
            <input id="insValue3" type="text" placeholder="Enter Extra Details...">
            <button type="submit" id="btnInsert">Add New Profile</button>
        </fieldset>
        <fieldset>
            <legend>Local Storage</legend>
            <div id="LSout"></div>
        </fieldset>
    </body>
</html>

仅.js

        const insValue1 = document.getElementById('insValue1');
        const insValue2 = document.getElementById('insValue2');
        const insValue3 = document.getElementById('insValue3');
        const btnInsert = document.getElementById('btnInsert');
        const LSout = document.getElementById('LSout');

        btnInsert.onclick = function () {
            const key = insKey.value;
            const value1 = insValue1.value;
            const value2 = insValue2.value;
            const value3 = insValue3.value;

            if (key && value1) {
                localStorage.setItem(key,value3]);
                location.reload();
            }
        };

        for (let i = 0; i < localStorage.length; i++) {
            const key = localStorage.key(i);
            const value1 = localStorage.getItem(key);
            const value2 = localStorage.getItem(key);
            const value3 = localStorage.getItem(key);

            LSout.innerHTML += `
            <tr>
                <td>${key}:</td>
                <td>${value1}</td> <br />`;
        }

为您的时间干杯，感谢您的任何建议！

解决方法

因为您的 JavaScript 没有用函数包装，所以它会在加载后立即处理。由于您在页面顶部加载 JS 文件，因此 JavaScript 在页面正文加载之前运行。如果您查看控制台，您可能会看到类似 LSout.innerHTML is undefined 的错误。

一个简单的解决方案是将 HTML 中的脚本标记移动到页面正文的底部。

<head>
        <title>Local Storage</title>

        <style media="screen">
            input,button {
                padding: 7px;
                height: 40px;
            }

            fieldset {
                margin-bottom: 25px;
            }

        </style>
    </head>
    <body>
        <h2 id="title">Local Storage - JS</h2>
        <fieldset>
            <legend id="subForm">Insert Accounts</legend>
            <input id="insKey" type="text" placeholder="Enter Site...">
            <input id="insValue1" type="text" placeholder="Enter Username...">
            <input id="insValue2" type="text" placeholder="Enter Password...">
            <input id="insValue3" type="text" placeholder="Enter Extra Details...">
            <button type="submit" id="btnInsert">Add New Profile</button>
        </fieldset>
        <fieldset>
            <legend>Local Storage</legend>
            <div id="LSout"></div>
        </fieldset>


        <script type="text/javascript" src="only.js"></script>
    </body>
</html>