Javascript 我有一个JS列表函数，当使用内联脚本时可以使用，但当HTML和JS在不同的文件中时不能使用_Javascript_Html_Scripting

Javascript 我有一个JS列表函数，当使用内联脚本时可以使用，但当HTML和JS在不同的文件中时不能使用

javascript html scripting

Javascript 我有一个JS列表函数，当使用内联脚本时可以使用，但当HTML和JS在不同的文件中时不能使用,javascript,html,scripting,Javascript,Html,Scripting,我肯定这个问题以前就提过了，对此我很抱歉。简而言之，我有一个带有JS内联脚本的HTML文件，它工作得很好，但是当我将HTML和JS分成两个不同的文件（在同一个文件夹中）时，它就停止工作了，我真的不知道为什么 lstore.html（html和JS）本地存储-JS 插入帐户添加新配置文件本地存储 const insKey=document.getElementById（'insKey'）； const insValue1=document.getElementById（'insValue

我肯定这个问题以前就提过了，对此我很抱歉。简而言之，我有一个带有JS内联脚本的HTML文件，它工作得很好，但是当我将HTML和JS分成两个不同的文件（在同一个文件夹中）时，它就停止工作了，我真的不知道为什么

lstore.html（html和JS）


本地存储-JS
插入帐户
添加新配置文件
本地存储
const insKey=document.getElementById（'insKey'）；
const insValue1=document.getElementById（'insValue1'）；
const insValue2=document.getElementById（'insValue2'）；
const insValue3=document.getElementById（'insValue3'）；
const btnisert=document.getElementById（'btnisert'）；
const LSout=document.getElementById（'LSout'）；
btnisert.onclick=函数（）{
const key=insKey.value；
常量值1=insValue1.0；
常量值2=insValue2.value；
常量值3=insValue3.value；
如果（键和值1）{
setItem（键，[value1，value2，value3]）；
location.reload（）；
}
};
for（设i=0；i`；
}

only.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>


本地存储
输入，按钮{
填充：7px；
高度：40px；
}
字段集{
边缘底部：25px；
}
本地存储-JS
插入帐户
添加新配置文件
本地存储

only.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, [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 />`;
        }

const insValue1=document.getElementById（'insValue1'）；
const insValue2=document.getElementById（'insValue2'）；
const insValue3=document.getElementById（'insValue3'）；
const btnisert=document.getElementById（'btnisert'）；
const LSout=document.getElementById（'LSout'）；
btnisert.onclick=函数（）{
const key=insKey.value；
常量值1=insValue1.0；
常量值2=insValue2.value；
常量值3=insValue3.value；
如果（键和值1）{
setItem（键，[value1，value2，value3]）；
location.reload（）；
}
};
for（设i=0；i`；
}

为您的时间干杯，任何建议都将不胜感激

因为您的JavaScript没有使用函数包装，所以它一加载就处理。由于在页面顶部加载JS文件，JavaScript在页面主体加载之前运行。如果在控制台中查看，可能会看到类似

LSout.innerHTML未定义的错误
一个简单的解决方案是将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>


本地存储
输入，按钮{
填充：7px；
高度：40px；
}
字段集{
边缘底部：25px；
}
本地存储-JS
插入帐户
添加新配置文件
本地存储
您可以在脚本标记中放置defer，以向浏览器指示脚本将在解析文档之后、加载domcontentload之前执行。
<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>