I'm having some trouble checking whether the input field is empty and when it is I want to revert it to the content in the h1 tag.
<body>
<h1>Enter Your Username</h1>
<input type="text" id="username" />
</body>
const input = document.querySelector("input");
const h1 = document.querySelector("h1");
input.addEventListener("input", (e) => {
h1.innerText = `Wele ${input.value}`;
});
if (input.length === 0) {
h1.innerText = "Enter Your Username";
}
I'm having some trouble checking whether the input field is empty and when it is I want to revert it to the content in the h1 tag.
<body>
<h1>Enter Your Username</h1>
<input type="text" id="username" />
</body>
const input = document.querySelector("input");
const h1 = document.querySelector("h1");
input.addEventListener("input", (e) => {
h1.innerText = `Wele ${input.value}`;
});
if (input.length === 0) {
h1.innerText = "Enter Your Username";
}
- Wele to StackOverflow! Please read How do I ask a good question? and How to create a Minimal, Reproducible Example – Rojo Commented Mar 24, 2021 at 17:42
- Use always textContent instead of innerText – Roko C. Buljan Commented Mar 24, 2021 at 17:49
-
Instead of checking the value via JavaScript you could also simply add the
requiredattribute to the input element. – Carsten Massmann Commented Feb 18, 2023 at 7:43
3 Answers
Reset to default 3input has not length property. You probably meant:
if (input.value.length === 0) {
h1.innerText = "Enter Your Username";
}
or without whitespaces: (thanks to Roko)
if (input.value.trim().length === 0) {
h1.innerText = "Enter Your Username";
}
Currently the input length check is not inside the event handler. Ideally you want to check if the input is empty every time the input value changes. So you want it inside your input.addEventListener callback
input.addEventListener("input", function(e) {
h1.innerText = this.value.length === 0 ?
"Enter Your Username" :
`Wele ${input.value}`;
});
**HTML**
<body>
<h1>Enter Your Username</h1>
<input type="text" id="username">
</body>
**JS**
let inputEl = document.querySelector('input')
let h1 = document.querySelector('h1')
inputEl.addEventListener('input',()=>{
h1.innerText = "Wele, " + inputEl.value
if (inputEl.value.length === 0) h1.innerText = "Enter Your Username";
})