input值传入函数里的问题，且将js里变量的值返回到input里、form表单不刷新

最新推荐文章于 2022-09-30 02:57:54 发布

zxclong

最新推荐文章于 2022-09-30 02:57:54 发布

阅读量791

点赞数 1

文章标签： javascript html html5

本文链接：https://blog.csdn.net/zxclong/article/details/121364411

版权

input值传入函数里的问题，且将js里变量的值返回到input里、form表单不刷新

1、在函数里获取到input标签里的值
- id选择器用getElementById
2、input获取到函数里的值
- 解决form不刷新的问题

1、在函数里获取到input标签里的值

id选择器用getElementById

input里加入id

<input type="text" id="a" />

所写的函数用document.getElementById("")的方法接收。

function sum(){
//	第一种
    var x = document.getElementById('a');
    var x1 = x.value;
//	第二种
    var x2 = document.getElementById('a').value;    
}

2、input获取到函数里的值

举例一个求和函数

 function getsum(){
        var x = document.getElementById('a').value;
        var y = document.getElementById('b').value;
        sum = 0;
        if(x<y){
            for(var i=Number(x);i<=Number(y);i++){
                sum +=i;
                }
           }
           document.getElementById('he').value = sum;
       }

html里的代码，输入框

<div >
    从 <input type="text" id="a" />
    到 <input type="text" id="b" />

    <input type="submit" value="的和为" onclick="getsum()"/>
    <input type="text" id="he" value=""/>
    <br>
</div>

其他几种对用id选择器对input赋值的方法

      document.getElementById('name1').value='值';
      document.getElementById('name1').html('值');
      document.getElementById('name1').attr('值');
      document.getElementById('name1').innerText = '值';

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>sum</title>
</head>
<body>
<div >
    从 <input type="text" id="a" />
    到 <input type="text" id="b" />

    <input type="submit" value="的和为" onclick="getsum()"/>
    <input type="text" id="he" value=""/>
    <br>
</div>
</body>
<script>
 function getsum(){
        var x = document.getElementById('a').value;
        var y = document.getElementById('b').value;
        sum = 0;
        if(x<y){
            for(var i=Number(x);i<=Number(y);i++){
                sum +=i;
                }
           }
           document.getElementById('he').value = sum;
       }
</script>

</html>

如果封装输入框用表单的话会有页面刷新的问题

解决form不刷新的问题

关键点是form的target和iframe里的name要一致，且style选择为不展开。

    <form target="nm_iframe" >
        从 <input type="text" id="a1" />
        到 <input type="text" id="b1" />

        <input type="submit" value="的和为" onclick="getsum022()"/>
        <input type="text" id="he1" value=""/>
        <input type="reset" >
        <br>
    </form>
    <iframe id="id_iframe" name="nm_iframe" style="display:none;"></iframe>

zxclong

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
input值传入函数里的问题，且将js里变量的值返回到input里、form表单不刷新

input值传入函数里的问题，且将js里变量的值返回到input里、form表单不刷新1、在函数里获取到input标签里的值id选择器用getElementById2、input获取到函数里的值解决form不刷新的问题1、在函数里获取到input标签里的值id选择器用getElementByIdinput里加入id<input type="text" id="a" />所写的函数用document.getElementById("")的方法接收。function sum(){//
复制链接

扫一扫