js实现两个输入框输入数字自动相加显示在第三个输入框

2024-10-17 前端开发跟版网

使用value属性获取前两个文本框的值，转换为数字相加后，使用value属性设置第三个文本框的值。示例如下： 1、HTML结构： input id="add1" type="text"/nbsp;+nbsp;input id="add2" type="text"/nbsp;=nbsp;input id="sum" type="text"/ 2、javascript代码： w

使用value属性获取前两个文本框的值，转换为数字相加后，使用value属性设置第三个文本框的值。示例如下：
1、HTML结构：

<input id="add1" type="text"/>&nbsp;+&nbsp;
<input id="add2" type="text"/>&nbsp;=&nbsp;
<input id="sum" type="text"/>

2、javascript代码：

window.onload = function(){
    var inputs = document.getElementsByTagName("input");
    for(i=0;i<inputs.length;i++){
        inputs[i].onblur = function(){
            var add1 = document.getElementById("add1").value;
            var add2 = document.getElementById("add2").value;
            document.getElementById("sum").value = add1*1 + add2*1;
        }
    }
}

3、最终效果演示：

本站部分内容来源互联网,如果有图片或者内容侵犯了您的权益，请联系我们，我们会在确认后第一时间进行删除！

上一篇：将数据保存为json文件，然后读取json文件的数据下一篇：使用layui弹出层layer.open弹出需要的表单

相关文档推荐

layui实现图片上传成功后回显点击放大图片功能

layui实现图片上传成功后回显点击放大图片功能，html代码部分： !-- html代码--div class="layui-form-item" label class="layui-form-label"上传图片/label div class="layui-input-block" button type="button" class="layui-btn" id="license-auth-letter-

Layui实现数据表格中鼠标悬停图片放大离开时恢复原图

Layui实现数据表格中鼠标悬停图片放大离开时恢复原图的效果，最终效果如下图所示：实现代码如下，在done函数中调用hoverOpenImg方法 var tableIns = window.demoTable = table .render({ elem : '#idTest', id : 'idTest', url : '/postData', //width : 150

微信小程序实现点击复制功能和手机拨打电话功能

做小程序项目的时候，客户提了一个功能需求优化，就是长按文字需要复制全部内容，因为有的手机支持全选复制，有的手机不支持全选复制。通过设置系统剪贴板的内容和获取系统剪贴板的内容实现复制功能 html相关代码： van-field value="{{form.contactPhone}}"

js拖拽排序插件Sortable.js如何使用

由于项目功能需要，要实现对table中的行实现拖拽排序功能，找来找去发现Sortable.js能很好的满足这个需求，而且它还是开源的，于是乎就开始学习使用Sortable.js 特点轻量级但功能强大移动列表项时有动画支持触屏设备和大多数浏览器（IE9及以下除外）支持

xm-select多选下拉框实现拼音、首字母搜索匹配

最近项目中遇到需要下拉框能实现根据首字母进行模糊搜索，下拉框使用的是xm-select，而xm-select支持中文的搜索，后端接口也仅支持中文的。因此需要借助其他插件来完成功能。最终实现的效果如下：涉及到的基础文件：引用 pinyin.js 和 initials.js。再引用 l

Layui中实现开关按钮的效果

按钮代码如下： {field: 'state', title: '状态', width: 85, templet: function (data) { if (data.state == 0) { return 'div input type="checkbox" checked="" name="codeSwitch" lay-skin="switch" id="open" lay-filter="switchTest" switchId=' + data

栏目导航

html教程 css教程前端开发 cms教程 seo优化网页设计服务器数据库平面设计电脑教程编程教程互联网移动开发 php编程 java编程实例代码 Python编程