Checking if input is empty in javascript fails

Question

Both in the case I enter a string and in the case I leave the input box blank, I get the console.log("Something's wrong!"); The console.log of my fieldObj is in both cases shown empty.

I tried check if the content of an input-field is empty:

CODE:

let fieldObj = document.getElementById("newListItem").value;
let button = document.getElementById("addItem");

button.addEventListener("click", function() {
  if (fieldObj != "") {
    console.log(fieldObj);
    console.log("Everything ok!");
  } else {
    console.log(fieldObj);
    console.log("Something's wrong!");
  }

}, false);

<input id="newListItem" type="text" />
<button id="addItem">Add</button>

I'd appreciate any help!

Seblor · Accepted Answer · 2020-01-22 14:30:22Z

4

This is because you set fieldObj as soon as the page loads, so it will be set as "" and never change.

You need to update the value inside the click listener :

const button = document.getElementById("addItem");

button.addEventListener("click", function() {
  const fieldObj = document.getElementById("newListItem").value;
  if (fieldObj !== "") {
    console.log(fieldObj);
    console.log("Everything ok!");
  } else {
    console.log(fieldObj);
    console.log("Something's wrong!");
  }

}, false);

<input id="newListItem" type="text" />
<button id="addItem">Add</button>

answered Jan 22, 2020 at 14:30

Seblor

7,1771 gold badge30 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Checking if input is empty in javascript fails

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related