CODEWITHSUNDEEP
javascripthtmlcssdomlogical-operators
CoDINGinDARK
CoDINGinDARK

Reputation: 346

Javascript,if condition works without && logical operator when && is present it doesnt work

I want the error message to display if the length of characters in the #nameT id is less than < 3 or greater <than 20.When I use && logical operator it doesn't work as intended when && is absent if I execute the code one by one it works perfectly.

<style>
    .name{
        border: .5px solid #C0C0C0;
        margin-left: 1em;
        margin-right: 1em;
        padding: .7em;
        margin-bottom: 1em;
    }

    #error{
        display: inline-block;
        color: #727171;
        border:1px solid #C0C0C0;
        padding: .5em;
        margin-top: .5em;
        display:none;
    }

    label{
        color:grey;
    }
    </style>
</head>
<body>

    <label>Name :<input class="name" id ="nameT" onblur="check()" type="text"></input></label>

    <div id="error">Error please type less than 15 characters</div><br/>

    <label>Password :<input class="name" type="password"></input></label>

<script language="javascript" type="text/javascript">

function check() {
    var length = document.getElementById("nameT").value.length;
    var error = document.getElementById("error");

    if(length < 20 && length < 3){
        error.style.display="inline-block";
    }
}
</script>
</body>

Upvotes: 1

Views: 502

Answers (2)

leopik
leopik

Reputation: 2351

You need to use || (or) operator. Your current if branch will only be entered when length is bigger than 20 and at the same time smaller than 3, which, as you can see, can never happen.

if (length > 20 || length < 3) {
    ...

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

No value of length can be at the same time greater than 20 and less than 3.

I think what you are trying to do is to set the error display of the length is more than 20 or less than 3, if so you need to use OR(||) logical operator

if(length > 20 || length < 3){
    error.style.display="inline-block";
}

when you use AND operator, both the operands has to be true only then the logical operator will return true. In your case that is simply impossible.

Upvotes: 3

Related Questions