index.html
<!DOCTYPE html>
<html>
<head>
<title>Greetings</title>
<style>
* {
font-family: monospace;
letter-spacing: 0;
}
body {
margin: 0;
background-color: #719DCA;
display: grid;
height: 100vh;
place-items: center;
}
form {
background-color: white;
padding: 32px;
}
.input-wrapper {
display: flex;
margin-bottom: 16px;
padding: 4px;
}
input {
flex: 1;
margin-right: 16px;
}
label {
color: #95b8d1;
font-size: 12px;
width: 40px;
}
button {
width: 100%;
height: 28px;
color: white;
border: none;
outline: none;
background-color: #809BCE;
}
</style>
</head>
<body>
<form name="names">
<div class="input-wrapper">
<input type="text" id="firstName" name="firstName">
<label for="firstName">First name</label>
</div>
<div class="input-wrapper">
<input type="text" id="lastName" name="lastName">
<label for="lastName">Last name</label>
</div>
<button>Generate greeting</button>
</form>
</body>
<script>
const btn = document.querySelector('button');
btn.addEventListener('click', e => {
e.preventDefault();
const form = document.forms["names"];
const fName = form.elements.firstName.value;
const lName = form.elements.lastName.value;
console.log(`Hello, ${fName} ${lName}!`);
form.firstName.value = '';
form.lastName.value = '';
});
</script>
</html>
скрин: https://prnt.sc/6ybQ8YWMJEfv
даже при использовании такого метода результат тот же:
document.names.reset();