CODEWITHSUNDEEP
javascripthtmlif-statement
Chenius
Chenius

Reputation: 69

Make alert appear when start typing input

I am trying to make something happen only when a user inputs data into an input element that has been created. However I don't want to validate that data has been inputted or make the user press a button to check if data has been inputted, I want something to happen as soon as the first data value is typed in the input field. I decide to just use a demo of something similar that I want to create - to cut out the clutter:

I have tried: 

var input = document.getElementById("input");

if(input == ""){
alert("no value");
}else{
input.style.background = "blue";
}
<input type="text" id="input">

But nothing seems to be working. For what reason is it not working? So in this example I would only want the background to be blue when the first data value is typed in. I also tried:

var input = document.getElementById("input");

if(input.length == 0){
alert("no value");
}else{
input.style.background = "blue";
}

and:

var input = document.getElementById("input");


if(input == undefined){
alert("no value");
}else{
input.style.background = "blue";
}

as well as variations using != and !==

Is it something small I'm missing?

Upvotes: 0

Views: 1135

Answers (4)

Kishor Gowda
Kishor Gowda

Reputation: 118

function handleCurrentInput(event) {
  const value = event.target.value;
  if (!value) {
    alert("no value");
  } else {
    alert("value entered -->", value);
  }
}
<input type="text" id="input" onInput="handleCurrentInput(event)">

Upvotes: 0

ankit singh
ankit singh

Reputation: 575

Hello you can try this

    <input type="text" id="input" onkeyup="inputfun()">
    <script type="text/javascript">
        function inputfun(){
            var input = document.getElementById("input");

            if(input.value == ""){
            input.style.background = "";
            alert("no value");
            }else{
            input.style.background = "blue";
            }
        }
    </script>

Upvotes: 0

Saud
Saud

Reputation: 878

Try this,
jQuery

$('#input').keyup(()=>{
  if($('#input').val() == ""){
    alert("no value");
  } else{
    $('#input').css({backgroundColor: 'your-color'});
  }
});

Upvotes: 0

Scott Marcus
Scott Marcus

Reputation: 65806

You were checking the actual element, not it's value. And, you didn't have any event listener set up for the element. But, it doesn't make much logical sense to check for no value after a value has been entered.

// When data is inputted into the element, trigger a callback function
document.getElementById("input").addEventListener("input", function(){
  // Check the value of the element
  if(input.value == ""){
    alert("no value");
  }else{
    input.style.background = "blue";
  }
});
<input type="text" id="input">

Upvotes: 1

Related Questions