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

<分区>

我有两个输入框，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>

最佳答案

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

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

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

另外， <font> 和 <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>

关于javascript - 我想在不使用任何按钮的情况下显示两个数字的加法，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49412586/

上一篇：javascript - 使用 Angular 创建多级网格

下一篇：html - 图片在左边，文字在右边

php - 这是什么数据类型、参数

jquery - 当用户在 jquery 中按 Enter 键时将 <br/> 添加到文本框

javascript - 使用 jQuery $.get 从网页获取元素值

javascript - jQuery 在 innerHTML 中无法运行

javascript - Script 标签将 Javascript 呈现为具有看似有效的 HTML 的文本

javascript - Jquery Header 在悬停时添加类

javascript - Javascript 中 DOM 的 onchange 不起作用

Javascript 事件似乎没有添加到动态生成的文本框中

javascript - 在 jQuery 中绑定(bind) ctrl + u 击键