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弹出需要的表单

相关文档推荐

将数据保存为json文件，然后读取json文件的数据

将数据保存为JSON文件： filename = '1.json'file_obj= open(filename, 'w')//此处是代码，返回值为XXXXXXXXXjson.dump(XXXXXXXXX,file_obj,indent=4,ensure_ascii=False) XXXXXXX ，表示需要保存的数据 file_obj ，定义的json对象； indent=4 每写入一句，就

layui实现弹窗下拉搜索选择框功能

layui实现弹窗下拉搜索选择框功能，实现效果如下： html按钮： a class="btn ygyouhui2 btn-xs audit_btn" href="javascript:void(0);" title="通过" data-id="{$row['id']}" 通过/a js代码部分： script // 事件监听 $('.audit_btn').click(function (){ con

KnockoutJS 3.X API 第四章之表单submit、enable、disable绑定

KnockoutJS是一款流行的JavaScript库，针对一个web应用程序的建立提供了比较好的基础架构。其中，表单的数据绑定功能是KnockoutJS最为常用的功能之一。本文将详细讲解KnockoutJS 3.x

用javascript实现改善用户体验之alert提示效果

下面是用javascript实现改善用户体验之alert提示效果的完整攻略。

JS去掉字符串前后空格、阻止表单提交的实现代码

JS去掉字符串前后空格

前台js改变Session的值(用ajax实现)

要实现“前台js改变Session的值(用ajax实现)”，我们需要通过以下步骤来实现：

栏目导航

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