<form>
<label>
Username
<input type="text" name="username" value="nguyen van ti">
</label>
<label>
Full Name
<input type="text" name="fullname">
</label>
<div hidden>
<button>Save</button>
<button>Discard</button>
</div>
</form>
form > label {
display: block;
}
View Compiled
const form = document.querySelector("form");
const div = document.querySelector("div");
const initialValues = {};
Array.from(form.elements).forEach(elem => {
initialValues[elem.name] = elem.value;
});
form.addEventListener("input", e => {
const { name, value } = e.target;
div.hidden = initialValues[name] === value;
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.