将动态javascript值设置为html文本输入总和

问题描述：

请仔细阅读表单和javascript。我的目标是抓取文本输入值'a'和'b'，那么总的整数值将被动态设置为文本输入id，称为'x'。我怎样才能设置动态JavaScript值到HTML文本输入？此外，它应该是实时更新，所以用户可以看到x上的a + b的总值。 x实际上是显示值，如果按下“提交”按钮，将会提交此值。将动态javascript值设置为html文本输入总和

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Bootstrap Example</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <script src="http://code.jquery.com/jquery-1.11.1.js" type="text/javascript"></script> 
</head> 
<body> 

<form method="post"> 

<input type="text" id="a" value="5"> 
<input type="text" id="b" value="2"> 
<input type="text" id="x" value="dynamic_value_from_javascript"> 
<input type="submit" name="submit" value="submit"> 

</form> 



<script type='text/javascript'> 

     $('#a').keyup(updatetxt); 
     $('#a').keydown(updatetxt); 

     var a = $('#a'); 
     var b = $('#b'); 
     var x = a+b; 

     function updatetxt() { 
      $('#x').val($(x).val()); 
     } 

</script> 

</body> 
</html>

使用HTML属性平变化上的文字输入和b来调用相同的javascript函数updatetxt。在函数updatetxt中，当a和b的值都不为空时，求和该值。让你的功能像这样。 var a = $（“＃a”）; var b = $（“＃b”）;如果a和b不是空白或未定义，则var x = a + b; $（“＃x”）。val（x）; else $（“＃x”）。val（''）; – Amit

答

有你的代码的一些问题，我知道，我已经低于固定他们：

你需要得到的a和b值在关键事件期间。
您需要订阅a和b输入的关键事件。
为了增加整数值，您可以使用parseInt
呼叫updatetxt首次没有任何事件，所以它能够在输入设定基于默认值总值

$('#a').keyup(updatetxt); 
 
$('#b').keyup(updatetxt); 
 

 
function updatetxt() { 
 
    var a = $('#a').val(); 
 
    var b = $('#b').val(); 
 
    var x = parseInt(a) + parseInt(b); 
 

 
    $('#x').val(x); 
 
} 
 

 

 
updatetxt();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<input type="text" id="a" value="5"> 
 
<input type="text" id="b" value="2"> 
 
<input type="text" id="x" value="">

答

查看我最近做的小提琴，它会更新实时。让如有查询时

$(function() { 
    $("#a").keyup(function() { 
    var a = $('#a').val(); 
    var b = $('#b').val(); 
    var c = parseInt(a) + parseInt(b); 
    $('#c').val(c); 
    }); 
    $("#b").keyup(function() { 
    var a = $('#a').val(); 
    var b = $('#b').val(); 
    var c = parseInt(a) + parseInt(b); 
    $('#c').val(c); 
    }); 
}); 

<input type="text" id="a" value="1"/><br> 
<input type="text" id="b" value="2"/><br> 
<input type="text" id="c" value=""/><br><br>

My Jsfiddle link

将动态javascript值设置为html文本输入总和

相关推荐