Как распечатать ввод из текстового поля?
Я пытался создать простую систему входа в систему (локальную), и я немного запутался. Как я могу ввести ввод, который пользователь написал в текстовое поле, напечатать его в консоли и сохранить в переменной?
Мой HTML-код:
<!DOCTYPE html>
<meta content = "text/html;charset=utf-8" http-equiv = "Content-Type">
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<script src = "username.js"></script>
<script src = "password.js"></script>
</head>
<body>
<title>Login #1</title>
<h2>Simple login system</h2>
<form name = "">
<label for = "text1">Username:</label>
<input type = "text" name = "text1">
<label for = "text2">Password:</label>
<input type = "text" name = "text2">
<button onclick = "password(), username()">login</button>
</form>
</body>
</html>
Для моего JS я хотел, чтобы функции «password()» и «username()» проверялись отдельно в отдельных файлах.
Файл паролей JS:
const Psword = 'Password9' //just an example
function password() {
console.info(Psword)
// if (user input from password field) = Psword
// alert('Login sucessfull redirecting!)
// else{
// alert('Username or password are incorrect')
// }
}
Файл имени пользователя JS:
var Username = 'Subject09'
function username() {
console.info(Username)
// if (user input from username field) = Username
// alert('Login sucessfull redirecting!)
// else{
// alert('Username or password are incorrect')
// }
}
Обновлено: добавлен мой код JS. (Примечание: я разделил свой код на 2 разных файла JS, потому что я просто хочу, чтобы результат был простым.)
Вы вызываете функции и импортируете скрипты, но не предоставили код для указанных функций и скриптов. Мы видим только часть головоломки, поэтому ее трудно отлаживать. Пожалуйста, включите все
Добавил сейчас, извините за путаницу! в середине класса и выяснить это.
Моя единственная проблема заключается в том, что я не знаю, как взять ввод, который пользователь написал в текстовом поле для имени пользователя или пароля, и сравнить его с переменными имени пользователя/пароля.
Главное, вы получаете значения из входных данных с помощью document.getElementById(id_name).value, где id_name — это id элемента ввода. Тогда вы можете делать с ним, что хотите. Кроме того, ваше событие onclick неправильно вызывает две функции, их нужно разделить ;, а не ,
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Мы можем отправить форму с помощью события onsubmit.
ОБНОВЛЕНИЕ: я показываю вам подход к отправке формы.
const form = document.querySelector("form");
form.addEventListener("submit",(e)=>{
e.preventDefault();
if (form["text1"].value && form["text2"].value){
console.info("Submitted the form");
form.reset();
}else{
console.info("Provide required values");
}
})<!DOCTYPE html>
<meta content = "text/html;charset=utf-8" http-equiv = "Content-Type">
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<script src = "username.js"></script>
<script src = "password.js"></script>
</head>
<body>
<title>Login #1</title>
<h2>Simple login system</h2>
<form>
<div>
<label>Username:</label>
<input type = "text" name = "text1" >
</div>
<div>
<label>Password:</label>
<input type = "text" name = "text2">
<div>
<button type = "submit">login</button>
</form>
</body>
</html>Установите идентификаторы для ввода и вашей кнопки. Вы можете предотвратить отправку, добавив type="button" к вашей кнопке.
Просто установите событие onclick на своей кнопке и получите свои входные значения.
<body>
<title>Login #1</title>
<h2>Simple login system</h2>
<form>
<label for = "text1">Username:</label>
<input type = "text" name = "text1" id = "username">
<label for = "text2">Password:</label>
<input type = "text" name = "text2" id = "password">
<button type = "button" id = "submitBtn">login</button>
</form>
window.onload = function() {
document.getElementById('submitBtn').addEventListener('click', onSubmit);
}
function onSubmit() {
console.info(document.getElementById('username').value);
console.info(document.getElementById('password').value);
// Do what you want with data
// You can submit with .submit()
document.forms['form'].submit();
}
О, так я могу установить идентификаторы в текстовые поля имени пользователя и пароля, и с идентификаторами я могу получить значения?
Да, вы также можете получить доступ к другим элементам, таким как классы, атрибуты... w3schools.com/js/js_htmldom_elements.asp
@Thomas: Form может напрямую получать значения своих полей. Проверьте код ниже: Нам не нужно использовать дополнительные идентификаторы и классы. Как и в случае с form["text1"].value. Это меньший код. Экономит много кода
Я бы использовал метод формы
onsubmitиpreventDefault(), чтобы избежать обновления страницы. Это лучше, чем полагаться на кнопкуonclick, так как вы также можете отправить с помощью кнопки ввода. Также лучше обрабатывать отправку с помощью одной функции, а не разделять их. Пожалуйста, поделитесь своим кодом javascript, чтобы другие могли помочь.