2017-07-14 99 views
1

我想实时计算树枝上两个变量的总和吗? 这是可以用树枝做的,还是我应该尝试使用Javascript?计算两个变量的总和

我曾尝试使用下面的代码树枝,但它不以卷轴的时间工作,我应该填写表格,然后返回页面(我的3页表格)

<div > 
    <label for="nbStudentClassA" >Number of studentA</label> 
    <div > 
     {{ form_widget(form.nbStudentA}} 
    </div> 
</div> 

<div > 
    <label for="nbStudentClassB" >Number of student B</label> 
    <div> 
     {{ form_widget(form.nbStudentB}} 
    </div> 
</div> 

<div 
    <label >Sum </label> 
    <div > 
    {% set sum = form.vars.value.nbStudentA + form.vars.value.nbStudentB %} 
    {{ sum }} 
    </div> 
</div> 
+4

来计算它的实时需要的JavaScript。树枝只在服务器上呈现一次,然后发送到客户端浏览器 –

回答

0

服务器端脚本将无法正常工作实际上,在刷新页面之前,您需要使用类似jQuery的东西来完成此操作。你可以轻松地使用jQuery来计算。还有一些JavaScript数学插件可以让您在基于JS的脚本中更轻松地进行数学运算。

$(document).ready(function() { 
 
    $(".calculate").click(function() {    
 
     var x = $('input[id="nbStudentClassA"]').val(); 
 
     var y = $('input[id="nbStudentClassB"]').val(); 
 
     var mult = x + y; 
 
     var add = (+x) + (+y); 
 
     var sub = (+x) - (+y); 
 
     var div = x/y; 
 
     $('.result').html("Multiply: " + mult + "<br /> Addition: " + add + "<br />Subtration: " + sub + "<br />Division : " + div);  
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label>Enter two numbers to calculate as an example: Addition, subtraction, multipication and division</label> 
 
    <div> 
 
     <label for="nbStudentClassA" >Number of student A</label> 
 
     <input id="nbStudentClassA" type="text" name="nbStudentClassA" /> 
 
    </div> 
 
    <div> 
 
     <label for="nbStudentClassB" >Number of student B</label> 
 
     <input id="nbStudentClassB" type="text" name="nbStudentClassB" /> 
 
    </div> 
 
    <div class="result"></div> 
 
    <button type="button" class="calculate">Calculate</button>

+0

我希望结果能够在没有按任何按钮的情况下自动执行,只需在输入两个变量之后 –