如何将用户输入从HTML表单元素存储到Javascript变量



我似乎不明白为什么输入没有存储在变量中。我试着搜索了几天,但一无所获,所以我问这里有人能帮忙吗。

我的代码:

function openForm() {
document.getElementById("myForm").style.display = "block";
document.getElementById("profile").style.display = "none";
document.getElementById("usernametxt").style.display = "none";
}
function closeForm() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
console.log(input);
document.getElementById("myForm").style.display = "none";
document.getElementById("Login").style.display = "none";
document.getElementById("profile").style.display = "block";
document.getElementById("usernametxt").style.display = "block";
alert(username);
alert(password);
}
<div>
<button class="open-button" onclick="openForm()" id="Login">Log In</button>
<!-- The form -->
<div class="form-popup" id="myForm">
<form class="form-container" onsubmit="return false;">
<h1>Login</h1>
<label for="username"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="username" id="username" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" id="password" required>
<button type="submit" class="btn">Login</button>
<button type="button" class="btn cancel" onclick="closeForm()">Close</button>
</form>
</div>
</div>

我希望这将对您有所帮助:

<div>
<button class="open-button" onclick="openForm()" id="Login">
Log In
</button>
<!-- The form -->
<div class="form-popup" id="myForm">
<form class="form-container" onsubmit="return false;">
<h1>Login</h1>
<label for="username"><b>Username</b></label>
<input
type="text"
placeholder="Enter Username"
name="username"
id="username"
required
/>
<label for="psw"><b>Password</b></label>
<input
type="password"
placeholder="Enter Password"
name="psw"
id="password"
required
/>
<button type="submit" class="btn">Login</button>
<button type="button" class="btn cancel" onclick="closeForm()">
Close
</button>
</form>
</div>
</div>

js:

function openForm() {
document.getElementById("myForm").style.display = "block";
document.getElementById("profile").style.display = "none";
document.getElementById("usernametxt").style.display = "none";
}

function closeForm() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
document.getElementById("myForm").style.display = "none";
document.getElementById("Login").style.display = "none";
// document.getElementById("profile").style.display = "block";
// document.getElementById("usernametxt").style.display = "block";
alert(username);
alert(password);
console.log(username,password) // if you want to see store value in console
}

在您到达的console.log行之前,您的代码抛出了一个错误

console.log(input);

校正方法:

function closeForm() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
// console.log(input); <= Remove this
document.getElementById("myForm").style.display = "none";
document.getElementById("Login").style.display = "none";
document.getElementById("profile").style.display = "block";
document.getElementById("usernametxt").style.display = "block";
alert(username);
alert(password);

}

注意,您的用户名变量是在closeForm函数中定义的。您可能希望在该特定函数之外定义username,以便它也适用于其他函数。

.value可以很好地捕捉输入的值。要验证这一点,请将console.log(document.getElementById("username").value)作为closeForm函数的第一步。

最新更新