Question

我有两个标识为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

输入值是字符串，由map.get(id).flatMap(_.get(name)) // returns Option[MyObject]符号连接要将它们添加到一起，请使用parseInt()转换为整数。

我还提供了一种处理非数字值的方法：

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

以下示例：

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

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;
}

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

以下演示有2个示例。第一个示例使用 HTMLFormControlsCollection API 和 .addEventListener() 。第二个示例使用 onevent attribute event handler 。

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

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

演示

＆＃13;

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);

＆＃13;

<!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>

＆＃13;

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>"; 
}
}

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

4 个答案:

演示