Source Code: (back to article)
<!DOCTYPE html>
<html>
<head>
<title>Getting and Setting Input Values</title>
</head>
<body>
<form id="userForm">
<input type="text" id="username" name="username" placeholder="Username">
<input type="email" id="email" name="email" placeholder="Email">
<button type="button" id="showValues">Show Values</button>
<button type="button" id="setValues">Set New Values</button>
</form>

<script>
const username = document.getElementById('username');
const email = document.getElementById('email');
const showValuesButton = document.getElementById('showValues');
const setValuesButton = document.getElementById('setValues');

showValuesButton.addEventListener('click', () => {
alert(`Username: ${username.value}\nEmail: ${email.value}`);
});

setValuesButton.addEventListener('click', () => {
username.value = 'newUsername';
email.value = 'newemail@example.com';
alert('Values have been set to new values.');
});
</script>
</body>
</html>