我想在不使用任何按钮的情况下显示两个数字的加法

Question

我有两个输入框，id为no1和no2。我必须在两个输入上放置两个整数值并在不使用任何按钮的情况下显示它们的总和。我的代码有效，但它只显示单个值，而不显示计算总和。

如何在用户输入时实时显示我的附加值？

var c;
var a = document.getElementById("no1");
var b = document.getElementById("no2");
var number = document.getElementById("number");
var m = document.getElementById("message");

a.onfocus = function() {
  m.style.display = "block";
}

a.onblur = function() {
  m.style.display = "none";
}

a.onkeyup = function() {
  var c;
  if (isNaN(a.value) == false) {
    c = a.value + b.value;
    m.innerHTML = c;
  } else {

    m.innerHTML = "<font color='red' size='45px'><strong>Must containe number only</strong></font>";
  }
}
b.onfocus = function() {
  m.style.display = "block";
}
b.onblur = function() {
  m.style.display = "none";
}
b.onkeyup = function() {

  if (isNaN(b.value) == false) {
    c = a.value + b.value;
    m.innerHTML = c;
  } else {

    m.innerHTML = "<font color='red' size='45px'><strong>Must containe number only</strong></font>";
  }
}

<div class="container">
  <input type="text" id="no1" name="no1" />
  <input type="text" id="no2" name="no2" />
  <button onclick="myFun()">Press Me</button>
</div>

<center>
  <font color="blue" size="45px" id="message"></font>
</center>

Answer 1

输入值是字符串，由 + 符号连接。
为了将它们相加，使用 parseInt() 转换为整数。

我还提供了一种处理 non-numeric 值的方法：

c = (parseInt(a.value)||0) + (parseInt(b.value)||0);

此外，<font> and <center> 标签已过时。
我建议改用 CSS。

示例如下：

var c;
var a = document.getElementById("no1");
var b = document.getElementById("no2");
var number = document.getElementById("number");
var m = document.getElementById("message");

a.onfocus = function() {
  m.style.display = "block";
}

a.onblur = function() {
  m.style.display = "none";
}

a.onkeyup = function() {
  var c;
  if (isNaN(a.value) == false) {
    c = (parseInt(a.value) || 0) + (parseInt(b.value) || 0);
    m.innerHTML = c;
  } else {
    m.innerHTML = "Must contain number only";
  }
}
b.onfocus = function() {
  m.style.display = "block";
}
b.onblur = function() {
  m.style.display = "none";
}
b.onkeyup = function() {

  if (isNaN(b.value) == false) {
    c = (parseInt(a.value) || 0) + (parseInt(b.value) || 0);
    m.innerHTML = c;
  } else {
    m.innerHTML = "Must contain number only";
  }
}

#message {
  color: blue;
  font-size: 45px;
  text-align: center;
}

<div class="container">
  <input type="text" id="no1" name="no1">
  <input type="text" id="no2" name="no2">
</div>

<div id="message"></div>

Answer 2

您的代码中的问题是，当您执行 a.value + b.value 时，它实际上不是在求和，而是将两个字符串连接为 a.value is string not number。所以你必须将字符串转换为数字（通过使用 parseInt 或 parseFloat）。您可以通过执行以下操作来删除冗余代码。

var c;
var a = document.getElementById("no1");
var b = document.getElementById("no2");
var m = document.getElementById("message");

var x=document.querySelectorAll("input");
for (var i = 0; i < x.length; i++) {
    x[i].addEventListener('focus', function() {
        m.style.display = "block";
    });
    x[i].addEventListener('keyup', function() {
        var c;
        if (isNaN(a.value) == false) {
          c = parseInt(a.value || 0) + parseInt(b.value || 0);
          m.innerHTML = c;
        } else {

          m.innerHTML = "<font color='red' size='45px'><strong>Must containe                    number only</strong></font>";
        }
    });
    x[i].addEventListener('blur', function() {
        m.style.display = "none";
    });
}

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>


  <div class="container">

    <input type="text" id="no1" name="no1" />
    <input type="text" id="no2" name="no2" />
    <button onclick="myFun()">Press Me</button>

  </div>
  <center>
    <font color="blue" size="45px" id="message"></font>
  </center>
</body>

</html>

Answer 3

像 <input> 这样的表单控件将值存储为字符串。使用 .valueAsNumber 属性这样您就不需要在之后使用 parseInt()、parseFloat()、Number() 等将任何字符串值转换为数字

~~inputObj1.value + inputObj2.value~~

inputObj1.valueAsNumber + inputObj2.valueAsNumber

下面的demo有2个例子。第一个示例使用 HTMLFormControlsCollection API and .addEventListener(). The second example uses an onevent attribute event handler.

两个示例都需要使用 <form> 标签。我用 <output> 标签替换了 <center> 和 <font> 标签（它们是 HTML4 而不是 HTML5）。我还将 <input> type 更改为 number.

两个示例都将 input 事件注册到 <form> 标记。在 eventListener 中有一个条件只会处理来自 <input type='number'> 标签的用户输入。第二个示例中的 onevent 属性处理程序只需要一个函数表达式。 input 事件将在用户输入文本后立即触发。

演示

var container1 = document.forms.container1;

var con1 = container1.elements;

container1.addEventListener('input', function(e) {
  if (e.target.type === 'number') {
    con1.message1.value = con1.no1.valueAsNumber + con1.no2.valueAsNumber;
  }
}, false);

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>


  <form id="container1">

    <input type="number" id="no1" name="no1">
    <input type="number" id="no2" name="no2">



    <output id="message1" style='color:blue; font-size:45px; text-align:center; display:block;'></output>

  </form>



  <form id="container2" oninput='message2.value = no3.valueAsNumber + no4.valueAsNumber'>

    <input type="number" id="no3" name="no3">
    <input type="number" id="no4" name="no4">



    <output id="message2" style='color:blue; font-size:45px; text-align:center; display:block;'></output>

  </form>


</body>

</html>

Answer 4

var c; 
var a = document.getElementById("no1"); 
var b = document.getElementById("no2"); 
var number = document.getElementById("number"); 
var m = document.getElementById("message"); 
a.onfocus = function() { 
m.style.display = "block"; } 
a.onblur = function() { 
m.style.display = "none"; } 
a.onkeyup = function() { 
var c;
if (isNaN(a.value) == false) { 
c = Number(a.value) + Number(b.value); 
m.innerHTML = c; 
}
else { 
m.innerHTML = "<font color='red' size='45px'><strong>Must containe number only</strong></font>";
}
}
b.onfocus = function() { 
m.style.display = "block"; } 
b.onblur = function() { 
m.style.display = "none"; } 
b.onkeyup = function() { 

if (isNaN(b.value) == false) { 
c = Number(a.value) + Number(b.value); 
m.innerHTML = c;
} 
else { 
m.innerHTML = "<font color='red' size='45px'><strong>Must containe number only</strong></font>"; 
}
}

我想在不使用任何按钮的情况下显示两个数字的加法

I want to show addition of two number without using any button

html

javascript

onkeyup

演示