Input box validation when there is no input

Question

I am trying to make a simple calculator. You enter one number, you enter the second one, press PLUS and get alert with an answer. I need to show alert('no data') if you click on PLUS when input fields are not touched.

function num1() {
  nm = document.getElementById('nsum1').value;
}

function num2() {
  mn = document.getElementById('nsum2').value;
}

function plus() {
  sum = +nm + +mn;
  if (nm == null || mn == null) {
    alert('no data');
  } else {
    alert(sum);
  }
}

<input onchange="num1()" id="nsum1" name="numb" type="tel" placeholder="number" maxlength="6" />
<span onclick="plus()" id="sum">PLUS</span>
<input onchange="num2()" id="nsum2" name="numb" type="tel" placeholder="number" maxlength="6" />

So far I have tried if(sum == undefined)/if(sum == null)/if(sum == false)/if(isNaN(sum))/if(sum == "") and nothing seems to work.

Answer 1

I've made some changes to your code to make it more robust. See the inline comments for a description.

Declare variables It is important to declare your variables, when you don't all the variables you are using will wind up in the global scope. When you Google this you will find many articles like this one: https://gist.github.com/hallettj/64478.

Prevent polluting the global scope. In a small website this may not be much of an issue but when working on larger project or with third party code, this is a must. The link above also explains this to some extend.

Use a button If you want something to be interactive, use an HTML element that was meant for it. The button element should be used, it has all sorts of accessibility features the span doesn't have. For instance, by default it will receive focus when navigating your website with the tab key.

Use descriptive variable names nm and mn may mean something to you now but in 6 months it will be a complete mystery. It also makes the code more readable and thus easier to maintain.

Attach event listeners in JS In general it is a bad idea to assign event listeners through the HTML attribute onXXX="". It is more error prone and a lot more time intensive when you want to change something.

// Wrap your code in a closure to prevent poluting the global scope.
(function() {

  // Always declare your variables. These variables are no longer scoped to the window object but are no scoped to the function we're in.
  var 
    valueA = null,
    valueB = null;

  /**
   * To check if your input is a valid number requires a couple of checks.
   * It is best to place these into their own method so you're other
   * method is more readable.
   */
  function isNumber(value) {
    if (
      // == null checks for undefined and null
      value == null ||
      value === '' ||
      isNaN(value)
    ) {
      return false;
    }

    return true;
  }

  function onChangeHandler(event) {
    var
      // Get the element that dispatched the event.
      target = event.target;
    // Check if the target has the class we've assigned to the inputs, of not you can ignore the event.
    if (!target.classList.contains('js-input')) {
      return;
    }
    // Based on the ID of the target, assign the value to one of the variables for the values.
    switch(target.id) {
    case 'nsum1':
      valueA = parseFloat(target.value);
      break;
      
    case 'nsum2':
      valueB = parseFloat(target.value);
      break;
    }
  }
  
  function onSumTriggerClicked(event) {
    // Check if there are numbers to work with
    if (
      !isNumber(valueA) ||
      !isNumber(valueB)
    ) {
      // If not alert the user
      alert('no data');
      return;
    }

    sum = valueA + valueB;
    alert(sum);  
  }

  function init() {
    var
      // Get the calculator element.
      calculator = document.getElementById('calculator'),
      // Get the button to sum up the value.
      sumButton = document.getElementById('sum-trigger');
      
    // Add an event listener for the change event.
    calculator.addEventListener('change', onChangeHandler);
    // Add an event listener for the click event.
    sumButton.addEventListener('click', onSumTriggerClicked);
  }

  // Call the init method.
  init();
})();

<div id="calculator">
  <input class="js-input" id="nsum1" name="numb" type="tel" placeholder="number" maxlength="6" />
  <button type="button" id="sum-trigger" id="sum">PLUS</button>
  <input class="js-input" id="nsum2" name="numb" type="tel" placeholder="number" maxlength="6" />
</div>

Answer 2

Please use this as reference.

I've fixed your code.

  if ( num1 === '' && num2 === '' ) {
    alert('no data');
  } else {
    alert( parseInt(num1) + parseInt(num2) );
  }

Answer 3

You can do it much easier

function plus(num1, num2) {
  alert(isNaN(num1) || isNaN(num2) ? 'No data' : num1 + num2);
}

function getNumber(id) {
  return parseFloat(document.getElementById(id).value);
}

<input id="nsum1" type="number" placeholder="number" maxlength="6" />
<span onclick="plus(getNumber('nsum1'), getNumber('nsum2'))" id="sum">PLUS</span>
<input id="nsum2" type="number" placeholder="number" maxlength="6" />

Answer 4

If you haven't touched the input field and get the value, then the result would be ""

You need a condition like

if (nm == "" || mn == "") {
alert('no data');
}

And also you should do operation after validations. You are doing operation and then validating.

---

Fixed other issues aswell.

function plus() {
  mn = document.getElementById('nsum2').value;
  nm = document.getElementById('nsum1').value;
  if (nm == "" || mn == "") {
    alert('no data');
  } else {
    sum = +nm + +mn;
    alert(sum);
  }
}

<input  id="nsum1" name="numb" type="tel" placeholder="number" maxlength="6" />
<span onclick="plus()" id="sum">PLUS</span>
<input  id="nsum2" name="numb" type="tel" placeholder="number" maxlength="6" />

Answer 5

Try to track it via Inspector, maybe log the values of nm and mn before anything else and correct your condition accordingly(as the sample).

function plus() {
  console.log(nm);
  sum = +nm + +mn;
  if (nm == null || mn == null) {
  alert('no data');
}

It will most likely just be blank. So in this case you can modify your condition into:

if (nm === '' || mn === '') {...}

Hope it will help