[英]how to assign value to input function using javascript
當我發現一個問題時，我試圖用 javascript 編寫一個基本的登錄 web 程序。 我無法使用 js 為輸入 function 賦值。 所以現在我不能使用 if else 來創建基本登錄。 這是我的代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
<link rel="stylesheet" href="index.css">
<script src="index.js"></script>
</head>
<html>
<body>
<h1>Login</h1>
<div>
<input type="text" placeholder="Input username" id="username" name="username" class="a47">
<br>
<br>
<input type="text" placeholder="Input password" id="password" name="password" class="a47">
<br>
<button type="button" onclick="login()" class="login">Login</button>
<script>
let username = 'username';
let password = 'password';
function login() {
if (username == a88, password == a89) {
alert("Thành công")
}
else {
alert("Không thành công")
}
}
</script>
</div>
</body>
</html>
請幫我
document.getElementById()方法用於 select HTML 元素的id 。 它用作value屬性的右值來讀取 HTML 元素的值。
/* The following method is used to select HTML elements based on the id attribute. */ const userNameElem = document.getElementById('username'); const passwordElem = document.getElementById('password'); const submitButton = document.getElementById("submit"); /* You can define the user name as a string as follows. */ const username = 'george'; /* You can define the user password as a string as follows. */ const password = '12345'; /* It is not recommended to assign a function to the "onclick" attribute in an HTML file. */ submitButton.addEventListener("click", function() { if(userNameElem.value == username && passwordElem.value == password) { alert("TRUE"); } else { alert("FALSE"); } });
<div> <input type="text" placeholder="Input username" id="username" name="username" class="a47"><br><br> <input type="text" placeholder="Input password" id="password" name="password" class="a47"><br> <button type="button" id="submit" class="login">Login</button> </div>
下面的代碼可能會對您有所幫助。 而且我認為Web forms — 使用用戶數據將幫助您更多。
function login() { const username = document.getElementById("username").value const password = document.getElementById("password").value // I change "a88", "a89" to strings, not variables. // Change back if I'm wrong. if (username == "a88", password == "a89") { alert("Thành công") } else { alert("Không thành công") } }
<h1>Login</h1> <div> <input type="text" placeholder="Input username" id="username" name="username" class="a47"> <br> <br> <input type="text" placeholder="Input password" id="password" name="password" class="a47"> <br> <button type="button" onclick="login()" class="login">Login</button> </div>
似乎沒有從頁面中讀取輸入值。 為了讀取輸入值，您首先需要從頁面中獲取input DOM 元素。
輸入字段具有分配給它們的id屬性，可用於提取這些元素。
<input ... id="username" ...>
<input ... id="password" ...>
您可以為此使用查詢選擇器：
# Extract username input field
const usernameInputField = document.querySelector('#username')
# Extract password input field
const passwordInputField = document.querySelector('#password')
在上面的代碼片段中， document.querySelector用於從網頁中提取任何 DOM 元素。 這個 function 將CSS 選擇器作為參數。 在這里，#username 和#password分別是用戶名和密碼字段的#username選擇器。 #符號使用 DOM 元素的 ID 表示 select。
一旦我們有了輸入字段，我們剩下要做的就是從這些字段中獲取當前值：
# Get current input value of username input field
const username = usernameInputField.value
# Get current input value of password input field
const password = passwordInputField.value
我們使用輸入元素的value屬性來獲取當前輸入值。
// Grab the input fields from the page
const usernameInputField = document.querySelector('#username')
const passwordInputField = document.querySelector('#password')
function login() {
// Grab current input values
const username = usernameInputField.value
const password = passwordInputField.value
// The remaining code below stays the same
if (username === a88, password === a89) {
alert("Thành công")
}
else {
alert("Không thành công")
}
}
在login() function 中，我們獲取輸入字段的當前值並按照之前處理的方式進行驗證。 請注意，我們在 function 本身內部執行此操作，以確保我們擁有來自輸入字段的最新值。
/* "onclick" function invoked from HTML file. */ function submit() { /* sample user name */ const username = 'tony'; /* sample password */ const password = '1234'; const userNameElem = document.getElementById('username'); const passwordElem = document.getElementById('password'); const submitButton = document.getElementById("submit"); if(userNameElem.value == username && passwordElem.value == password) { alert("TRUE"); } else { alert("FALSE"); } };
<div> <input type="text" placeholder="Input username" id="username" name="username" class="a47"><br><br> <input type="text" placeholder="Input password" id="password" name="password" class="a47"><br> <button type="button" id="submit" class="login" onClick="submit()">Login</button> </div>
您可以將值作為括號內的參數傳遞給函數。 而且，每當您嘗試比較字符串時，請使用引號來包裝您的字符串。 在您的情況下， a89 和 a88 的值應該在引號內。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
<link rel="stylesheet" href="index.css">
<script src="index.js"></script>
</head>
<html>
<body>
<h1>Login</h1>
<div>
<input type="text" placeholder="Input username" id="username" name="username" class="a47">
<br>
<br>
<input type="text" placeholder="Input password" id="password" name="password" class="a47">
<br>
<button type="button" onclick="login()" class="login">Login</button>
<script>
let username = 'username';
let password = 'password';
function login(username,password) {
if (username === 'a88', password === 'a89') {
alert("Thành công")
}
else {
alert("Không thành công")
}
}
</script>
</div>
</body>
</html>
正文必須至少 30 個字符； 您輸入了 0。
如何在提交時調用javascript函數為輸入賦值？ （ACE編輯）
[英]How to call a javascript function on submit to assign a value to an input? (ACE Editor)
如何使用javascript / jQuery將值分配給動態創建的輸入框
[英]How to assign value to dynamically created input box using javascript/Jquery
從輸入框中獲取值並使用Javascript將其分配給變量
[英]Getting a Value from an Input Box and Assign it in a Variable using Javascript
使用 javascript 為上一頁輸入的 textarea 賦值
[英]assign value to textarea from the previous page input using javascript
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.