CODEWITHSUNDEEP
javascriptif-statement
Karl
Karl

Reputation: 83

Only second part of if statement is working

My Code is below. At the moment no matter what I enter I never get the message "Must be numeric". Either the number is returned to me or I get the second message "must be 10 digits". How can I fix this? So for example if the user enters 'abcdefghij' I want "Must be numeric to pop up". But say they enter 'abc' I also want "must be numeric to pop up aswell as "must be 10 digits'.

function checkID() {
  var ID = document.getElementById('input5').value
  if (isNaN(ID)) {
    ID = "Must be numeric."
  }
  document.getElementById('message').innerHTML = ID;

  if (ID.length == 10) {
  }
  else {
    document.getElementById('message').innerHTML = "Must be 10 digits in length";
  }

}

Upvotes: 1

Views: 41

Answers (4)

prasanth
prasanth

Reputation: 22500

Try with both in if mode only . And don't use the input variable for result .Because first time if condition replace by a text.so try with variable was different from input variable

function checkID() {
var res="";
  var ID = document.getElementById('input5').value
  if (isNaN(ID)) {
    res += "Must be numeric."
  }
if(ID.length != 10){
  res += "Must be 10 digits in length";
  }
  document.getElementById('message').innerHTML = res;

}
<input id="input5">
<p id="message"></p>
<button onclick="checkID()">check</button>

Upvotes: 1

Jiro90
Jiro90

Reputation: 91

  function checkID() {
      var ID = document.getElementById('input5').value;
      var sReturn = "";
      if (isNaN(ID)) {
         sReturn = "Must be numeric."
      }

      if (ID.length != 10) {
         sReturn += "Must be 10 digits in length.";
      }
      if(sReturn.length<=0){
         document.getElementById('message').innerHTML = ID;
      }else{
         document.getElementById('message').innerHTML = sReturn;
      }
}

You did not add both the message into one variable.

Upvotes: 0

Ngoan Tran
Ngoan Tran

Reputation: 1527

You never get message "Must be numeric." because it was overritten by "Must be 10 digits in length" when length of input is different from 10.

Here is solution:

document.getElementById('check').addEventListener('click', checkID);
function checkID() {
  var ID = document.getElementById('input5').value
  if (isNaN(ID)) {
    ID = "Must be numeric.";
  } else if (ID.length != 10){
    ID = "Must be 10 digits in length";
  }
  document.getElementById('message').innerHTML = ID;
}
<input id='input5'/>
<div id='message'></div>
<button id='check'>check</button>

Upvotes: 0

Sankar
Sankar

Reputation: 7107

The problem is, you are using same variable.

function checkID() {
  var ID = document.getElementById('input5').value;
  var ID1 = '';
  if (isNaN(ID)) {
    ID1 = "Must be numeric."
  }
  document.getElementById('message').innerHTML = ID1;

  if (ID.length != 10) {
    document.getElementById('message').innerHTML += "Must be 10 digits in length";
  }

}
<input id="input5" />
<button onclick="checkID()">submit</button>
<label id="message"></label>

Upvotes: 0

Related Questions