Source Code:
(back to article)
Submit
Result:
Report an issue
<!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>