Sum Of Two Variables From Div

I want to sum the two field automatically using javascript , After searching more about what I want exactly I found this example on table please how can I change it to work on divs

Solution 1:

Don't know exactly what you want but this does work.If you want from only 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);

or you don't mind input fields and making it dynamic

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

Solution 2:

Make it simple

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