How to add two values that are in HTML code via php script?

Question

Doing a project for school and I need a way to sum two values that are pulled from my database into HTML view file via PHP code.

So the code is:

<p id="suma_prihoda" value="<?php echo array_sum($DATA['suma_prihoda']); ?>">Total sum of income is: <b><?php echo array_sum($DATA['suma_prihoda']); ?></b> euros.</p>
<p id="suma_rashoda" value="<?php echo array_sum($DATA['suma_rashoda']); ?>">Total revenue sum is: <b><?php echo array_sum($DATA['suma_rashoda']); ?></b> euros.</p>

I tried using a script that get's the value of the paragraph from document.getElementById('suma_prihoda').value and tried to make variables that can subract the two values to get a total account balance and it didn't work.

Prior to this I made a Controller which get's all the cash entry(it's a money related Veb site) values into an array, and then used the 'array_sum' to add all of it. So at the end of that part of the assignment I have two values, one for my income, and one for my revenue. And I need to get the total balance. I know it's easy to subtract 1400-1200 euros, but I need the program to do it itself.

the script I used (that didn't work) was:

<script>
    var x = document.getElementById("suma_prihoda").value;
    var y = document.getElementById("suma_rashoda").value;

    var element = document.getElementById("xxx");
    element.innerHTML = x - y;
</script>

I am looking for some guidelines to what I could do in this (CMS Veb site), and I can provide more blocks of code if necessary.

Answer 1

Note value is not a valid attrbute for <p> . See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p and https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes .

For Example:

 var x = document.getElementById("suma_prihoda").value; var y = document.getElementById("suma_rashoda").value; console.log(x); console.log(y); var element = document.getElementById("xxx"); element.innerHTML = x - y; 

 <p id="suma_prihoda" value="21">Total sum of income is: <b>21</b> euros.</p> <p id="suma_rashoda" value="10">Total revenue sum is: <b>10</b> euros.</p> <div id="xxx"></div> 

What you actually want is a data attribute :

 var x = document.getElementById("suma_prihoda").dataset.value; var y = document.getElementById("suma_rashoda").dataset.value; console.log(x); console.log(y); var element = document.getElementById("xxx"); element.innerHTML = x - y; 

 <p id="suma_prihoda" data-value="21">Total sum of income is: <b>21</b> euros.</p> <p id="suma_rashoda" data-value="10">Total revenue sum is: <b>10</b> euros.</p> <div id="xxx"></div> 

Just replace my hard coded values with your PHP echo statements.

PHP OPTION

create some variables, do the math with those and echo the result:

<?php
$income = array_sum($DATA['suma_prihoda']);
$revenue = array_sum($DATA['suma_rashoda']);
$difference = $income - $revenue
?>
<p id="suma_prihoda" >Total sum of income is: <b><?php echo $income; ?></b> euros.</p>
<p id="suma_rashoda" >Total revenue sum is: <b><?php echo $revenue; ?></b> euros.</p>
<p>Difference: <b><?php echo $difference; ?></b></p>

Answer 2

You can " print " directly the value into the variable:

<script>
    var x = <?php echo array_sum($DATA['suma_prihoda']); ?>;
    var y = <?php echo array_sum($DATA['suma_rashoda']); ?>

    var element = document.getElementById("xxx");
    element.innerHTML = x - y;
</script>