Question

我想使用javascript自动对两个字段求和，

在搜索了我想要的更多内容后，我在桌面上找到了这个例子，请问如何更改它以便在div上工作

这些是我的字段

<div> class="form-group">
    <label for="nbStudentA" >Number student A</label>
    <div> 
        {{ form_widget(form.nbStudentA, {'attr':{'class': 'form-control'}}) }}
    </div>
</div>


<div class="form-group">
    <label for=" nbStudentB " >Number Student B</label>
    <div class="col-sm-9">
      {{ form_widget(form.nbStudentB, {'attr':{'class': 'form-control'}}) }}
    </div>
</div>

<div class="form-group">
    <label for="Sum" >Sum Students :</label>
    <div>
        <input  type="text" class="Sum"  name="total" value=""/>
    </div>
</div>

更新

我之前尝试过的是使用twig对这两个变量求和，但它是在服务器端完成的，我想要的是在用户输入变量时实现总和：

<div >
    <label>Sum </label>
    <div >
        {% set foo = form.nbStudentA + form.nbStudentB %}
       {{ foo }}
    </div>
</div>

Answer 1

不知道你想要什么，但这确实有效。如果你只想要div

<div id="std-1">1</div>
<div id="std-2">2</div>
<div>{{one + two}}</div>
</div>
 //scripts
 $scope.one=parseInt(document.getElementById('std-1').innerHTML);
 $scope.two=parseInt(document.getElementById('std-2').innerHTML);

或者您不介意输入字段并使其动态

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    <div ng-app>
    <div class="std-1">
     Student one: <input ng-model="student.one " type="number"/>
    </div>
    <div class="std-2">
     Student two:  <input ng-model="student.two " type="number"/>
    </div>
    <div>Sum: {{student.one + student.two}}</div>
    </div>

＆＃13;

Answer 2

简单明了

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js">
</script>

<div ng-app>  
<div id="first">
  <input ng-model="first"  placeholder="First number"  type="text" />
 </div> 
 <div id="second">
  <input ng-model="second" placeholder="Second number" type="text" />
 </div>
  <h1> Sum: {{first--second}} </h1>
</div>

div

2 个答案: