Question

我正在尝试制作一个简单的计算器。您输入一个号码，然后输入第二个号码，按加号并获得答案警报。如果您在未触及输入字段时点击加号，我需要显示警告（'无数据'）。

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" />

到目前为止，我已经尝试过 if（sum == undefined）/ if（sum == null）/ if（sum == false）/ if（isNaN（sum））/ if（sum ==“” ），似乎没有任何效果。

Answer 1

如果您未触及输入字段并获取值，则结果为""

你需要像

这样的条件

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

你也应该在验证后进行操作。您正在进行操作，然后进行验证。

修正了其他问题。

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 2

我对您的代码进行了一些更改，以使其更加强大。有关说明，请参阅内联注释。

声明变量 声明变量很重要，如果不是所有变量都将在全局范围内结束。当您使用Google时，您会发现许多类似这样的文章：https://gist.github.com/hallettj/64478。

防止污染全球范围。在一个小型网站中，这可能不是什么大问题，但在处理大型项目或使用第三方代码时，这是必须的。上面的链接也在一定程度上解释了这一点。

使用按钮如果您希望某些内容具有交互性，请使用适合它的HTML元素。应使用button元素，它具有span没有的各种辅助功能。例如，默认情况下，当使用tab键导航您的网站时，它将获得焦点。

使用描述性变量名称 nm和mn可能对您有意义，但在6个月内它将是一个完全的谜。它还使代码更易读，因此更易于维护。

在JS中附加事件侦听器通常，通过HTML属性onXXX=""分配事件侦听器是个坏主意。当你想要改变某些东西时，它更容易出错并且更加耗时。

// 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 3

你可以更容易地做到这一点

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

尝试通过Inspector跟踪它，可能先记录nm和mn的值，然后相应地更正你的条件（作为样本）。

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

很可能只是空白。因此，在这种情况下，您可以将您的条件修改为：

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

希望它会有所帮助

Answer 5

请使用this作为参考。

我修复了你的代码。

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

没有输入时输入框验证

5 个答案: