SP2010: How to add the text of two divs into a third div

Question

I have a page where I'm displaying some number in divs. I want to add the numbers in 2 divs and I want to display the total in a 3rd div.

If I enter the below script in the developers console it works, but I'm not able to load the script into the page.

div3.innerHTML = parseInt(div1.innerHTML) + parseInt(div2.innerHTML);

jQuery approach I tried -

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">

$(document).ready(function() {
  var vtotal = $('#total').text();
  var varch = $('#archTotal').text();
  var vall = $('#alltotal').text();
  vall = parseInt(vtotal) + parseInt(varch);

});
</script>

Answer 1

Your problem is the DOM

When you execute in the console, the DOM is all built and ready to be used

If you put script on a page the page (DOM) is still loading so your DIV references are most likely undefined

You have to wait till the DOM is ready

Like jQuery does with the ready function

But you can do without jQuery: https://stackoverflow.com/questions/9899372/pure-javascript-equivalent-to-jquerys-ready-how-to-call-a-function-when-the

Answer 2

Try using window.onload()

You could be facing the case where even though the DOM has loaded, the data you want could be in a frame that hasn't loaded yet. Here is a thread that explains the difference between $(document).ready() & window.onload()