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

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>

你可能感兴趣的:(javascript,html,html5)