js实现网页的两个input标签内的数值加减(示例代码)
更新时间：2017年08月15日 09:04:01 投稿：jingxian
下面小编就为大家带来一篇js实现网页的两个input标签内的数值加减(示例代码)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
实例如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload=function(){
var oIput1=document.getElementById('put1');
var oIput2=document.getElementById('put2');
var nAdd=document.getElementById('add');
var nSub=document.getElementById('subtraction');
nAdd.onclick=function(){
var a=Number(oIput1.value);
var b=Number(oIput2.value);
c = a+b;
alert(c);
}
nSub.onclick=function(){
var a=Number(oIput1.value);
var b=Number(oIput2.value);
c = a-b;
alert(c);
}
}
</script>
</head>
<body>
数值1:<input id="put1" type="text" value=""/>
数值2：<input id="put2" type="text" value=""/>
<input type="button" id="add" value="求和" />
<input type="button" id="subtraction" value="相减" />
</body>
</html>
下面是效果图 ↓
以上这篇js实现网页的两个input标签内的数值加减(示例代码)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章
IE6、IE7中获取Button元素的值的bug说明，大家在以后使用dom操作的朋友可以注意下。2011-08-08
这篇文章主要介绍了微信小程序分享小程序码的生成（带参数）以及参数的获取，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-03-03
这篇文章主要介绍了关于javascript模块加载技术的一些思考 ,需要的朋友可以参考下2014-11-11
这篇文章主要介绍了JS数组方法reverse()用法,结合实例形式分析了JS数组reverse()方法基本功能、用法与操作注意事项,需要的朋友可以参考下2020-01-01
强大的JavaScript响应式图表Chartist.js的使用
本篇文章主要介绍了强大的JavaScript响应式图表Chartist.js的使用，具有一定的参考价值，有兴趣的可以了解一下2017-09-09
需要引入Jquery，如果需要全部功能，请引入jquery-ui和jquery-ui.css，具体实现步骤如下，感兴趣的朋友可以参考下哈2013-06-06
这篇文章主要给大家介绍了关于如何利用Proxy更优雅地处理异常的相关资料,文中通过实例代码以及图文介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2022-03-03
如何在 xHTML 中验证 noscript+meta refresh 标签
这篇文章主要介绍了如何在 xHTML 中验证 noscript+meta refresh 标签,需要的朋友可以参考下2023-03-03
这篇文章主要介绍了微信小程序实时聊天支持图片预览，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
在javascript变量中可以存放两种类型的值：原始值和引用值。原始值存储在栈上的简单字段，也就是值直接存储在变量所标示的位置内。2011-09-09
最新评论