使用sum将动态javascript值设置为html文本输入_Javascript_Jquery

使用sum将动态javascript值设置为html文本输入

javascript jquery

使用sum将动态javascript值设置为html文本输入,javascript,jquery,Javascript,Jquery,请仔细阅读表单和javascript。我的目标是抓取文本输入值“a”和“b”，然后将总整数值动态设置为文本输入id-“x”。如何将动态javascript值设置为html文本输入？此外，它应该是实时更新，以便用户可以看到总价值的a+b的x。x实际显示的是该值，如果按下“提交”按钮，x将提交该值 <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title&g

请仔细阅读表单和javascript。我的目标是抓取文本输入值“a”和“b”，然后将总整数值动态设置为文本输入id-“x”。如何将动态javascript值设置为html文本输入？此外，它应该是实时更新，以便用户可以看到总价值的a+b的x。x实际显示的是该值，如果按下“提交”按钮，x将提交该值

<!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>


引导示例
$（'a'）.keyup（updateText）；
$（'a'）.keydown（updateText）；
变量a=$（'a'）；
var b=$（“#b”）；
var x=a+b；
函数updateText（）{
$（'#x'）.val（$（x）.val（））；
}

检查我最近制作的小提琴，它会实时更新。如果有任何疑问，请告诉我

$(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>

$（函数（）{
$（“#a”）.keyup（函数（）{
变量a=$（'#a'）.val（）；
var b=$（'#b'）.val（）；
var c=parseInt（a）+parseInt（b）；
$（'c'）.val（c）；
});
$（“#b”）.keyup（函数（）{
变量a=$（'#a'）.val（）；
var b=$（'#b'）.val（）；
var c=parseInt（a）+parseInt（b）；
$（'c'）.val（c）；
});
});

您的代码存在一些问题，我已在下面解决了这些问题：

您需要在keyup事件期间获取a和b的值

您需要订阅

和

输入的键控事件

要添加整数值，可以使用

parseInt

第一次在没有任何事件的情况下调用

updateText

，以便它可以根据输入中的默认值设置总值

$（'a'）.keyup（updateText）；
$（'#b'）.keyup（updateText）；
函数updateText（）{
变量a=$（'#a'）.val（）；
var b=$（'#b'）.val（）；
var x=parseInt（a）+parseInt（b）；
$（'#x'）.val（x）；
}
updateText（）
在文本输入a和b上使用html属性onchange调用相同的javascript函数updateText。在函数updateText中，当a和b的值都不为空时，求和该值。让你的功能像这样。var a=$（“#a”）；var b=$（“#b”）；如果a和b不为空或未定义，则var x=a+b$（“x”）.val（x）；其他美元（“#x”）.val（“”）；