Question

我有一个可以在测试时正常工作的代码，现在我决定将其包含在表单中，而只是不想工作。如果我删除了表单标签，则可以使用它，而使用表单标签则不能。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
<script>
function action() {
var checkBox = document.getElementById("UPCheck");
if (checkBox.checked == true){
    window.localStorage['username'] = document.getElementById('username').value;
    window.localStorage['password'] = document.getElementById('password').value;
    window.localStorage['unpwchecked'] = "yes";
    alert("Saved!");
}
else
{
    window.localStorage['username'] = "";
    window.localStorage['password'] = "";
    window.localStorage['unpwchecked'] = "";
}
}
function action2() {
    document.getElementById('username').value = window.localStorage['username'];
    document.getElementById('password').value = window.localStorage['password'];
}
</script>
</head>
<body>
<form>
<input type="text" id="username" name="username" value="">
<input type="text" id="password" name="password" value="">
Save username / password in cookies: <input type="checkbox" id="UPCheck" name="savelocalunpw">
<p><button onclick="action()" type="button">Save values!</button></p>
<p><button onclick="action2()" type="button">Load values!</button></p>
</form>
<script>
var alerted = localStorage.getItem('unpwchecked');
if (alerted == 'yes') {
document.getElementById('username').value = window.localStorage['username'];
document.getElementById('password').value = window.localStorage['password'];
document.getElementById("UPCheck").checked = true;
}
</script>
</body>
</html>

删除表单标签，并将值正确保存在本地存储中。

Answer 1

尝试：

var isChecked = document.getElementById("UPCheck").checked;

Answer 2

问题来自函数名称。如果您重命名

function action()

到

function action1()

并进行修改

<button onclick="action1()" type="button">Save values!</button>

然后您的代码将起作用。

我注意到没有form标签，代码可以正常工作。如果添加表单元素，则会收到控制台错误，指出action()不是函数。我只是猜测函数名称action()与表单属性action

之间存在冲突

Answer 3

可能更好的做法是为按钮添加一个与表单标签一起使用的事件处理程序。重命名功能很有用。

JS

document.getElementById("save").addEventListener("click", function(){

var checkBox = document.getElementById("UPCheck");
if (checkBox.checked == true){
    window.localStorage.username = document.getElementById('username').value;
    window.localStorage.password = document.getElementById('password').value;
    window.localStorage.unpwchecked = "yes";
    alert("Saved!");
}
else
{
    window.localStorage.username = "";
    window.localStorage.password = "";
    window.localStorage.unpwchecked = "";
}
});

document.getElementById("load").addEventListener("click", function(){
    document.getElementById('username').value = window.localStorage.username;
    document.getElementById('password').value = window.localStorage.password;
});

var alerted = localStorage.getItem('unpwchecked');
if (alerted == 'yes') {
document.getElementById('username').value = window.localStorage.username;
document.getElementById('password').value = window.localStorage.password;
document.getElementById("UPCheck").checked = true;
}

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>

</head>
<body>
<form>
<input type="text" id="username" name="username" value="">
<input type="text" id="password" name="password" value="">
Save username / password in cookies: <input type="checkbox" id="UPCheck" name="savelocalunpw">
<p><button  id = "save" type="button">Save values!</button></p>
<p><button  id = "load" type="button">Load values!</button></p>
</form>

</body>
</html>

您可以对本地存储使用“点”表示法。

如何在表单内使用getelementbyID获取复选框的值

3 个答案: