Question

我最近在我当前的课程中介绍了Web存储，并且负责使用按钮从文本字段（输入）获取输入，然后为此文本字段数据创建键和值。这似乎相当微不足道。我制作了一些代码以试图让它工作。但是代码没有按预期工作。

以下是我设法制作的（非工作）代码：

HTML：

<!doctype html>
<html>
<head>
    <title>Test</title>
    <script src="app.js" charset="utf-8"></script>
    <meta charset="utf-8">
</head>
<body>
    <p>Forename:</p>
    <input type="text" id="FName"><br>
    <button type="button" id="Submit">Submit</button>
</body>
</html>

JS：

var SubmitButton = document.getElementById('Submit');
var TextField = document.getElementById('FName');

SubmitButton.addEventListener('click', function(e){
    ToTextField();
});

function ToTextField(){
    var input = document.getElementById("FName").value;
    localStorage.setItem("Text", input);
}

虽然此代码不起作用，但我已经在浏览器（Firefox）中分析了开发人员工具选项卡，并注意到我收到以下错误：

TypeError: SubmitButton is null [Learn More]    app.js:6:1

如果我然后在控制台中输入以下JS行（在我的文件中是相同的），则提交按钮似乎按照我的预期工作。我无法弄清楚问题：

var SubmitButton = document.getElementById('Submit');
SubmitButton.addEventListener('click', function(e){
    ToTextField();
});

有人能发现我在这里遇到的问题吗？谢谢:)）

Javascript代码适用于控制台，但不适用于文件

0 个答案: