How do I write a sum function for text in HTML and text retrieved from an HTTP GET request's response?

I’m probably going about this the wrong way as I can’t find anything even close to what I’m trying to do, if anyone can point me in the right direction I would be grateful.

I have a button in my html to trigger a function ‘p0000’…

<button onclick="p0000();“>ADD</button>

Function:

function p0000() {var xhttp = new XMLHttpRequest();xhttp.onreadystatechange = function() {if (this.readyState == 4 && this.status == 200) {
  var x = document.querySelectorAll(".cosT");
x[0].innerHTML = this.responseText;
x[1].innerHTML = this.responseText;
x[2].innerHTML = this.responseText;
x[3].innerHTML = this.responseText;
x[4].innerHTML = this.responseText;
x[5].innerHTML = this.responseText;
x[6].innerHTML = this.responseText;}};

xhttp.open("GET", "text/p0000.txt", true);
xhttp.send();}

The ‘text/p0000.txt’ document contains a price:

19.99

The function works perfectly, updates 7 instances of the ‘cosT’ divs with the new price of 19.99.

What I would like the function to do is ADD 19.99 to the amount already in the ‘cosT’ divs, NOT just replace the amount. Starting from 0.00, click once–see 19.99, click twice–see 39.98, and so on, so guessing I need to run another function within this function but no clue where to start.

Clearly, I have no clue how to loop over instances of ‘x’ either :)

Many thanks in advance.

Hi Sid, it’s part of a nav system so there’s seven variations of the following between the body tags, ‘cosT’ in the span tags:

<body>
<div id="detCapNav" class="sidenav">
<div class="cT"><div class="bT">BASKET TOTAL</div> <div class="bA">$<span  class="cosT">0.00</span></div></div>
<div class="cT"><button class="coBtn bS" onclick="vBask();">VIEW BASKET</button></div>
<div class="cT"><button class="coBtn cS" onclick="closedetCapNav()">CONTINUE SHOPPING</button></div>
<div class="cT"><button class="coBtn pS" onclick="cHcol(this, 'rgba(250, 254, 231,1)');cartAdCapNav();p0000();">ADD TO BASKET</button></div>
<div class="tN"><img src="sample/image/01.jpg"></div>
<div class="iT"><div class="menuTitle">Baseball Cap</div></div>
</div>

So tried Sid’s solution:

let addedValue = parseFloat(document.getElementsByClassName("cosT")[0].textContent) + 10.90 document.getElementsByClassName("cosT")[0].innerHTML = addedValue.toFixed(2);

…which is great client-side, can’t see how to code it in with an http request, to get the value from the remote text file?

So, thank you Heretic:

    function pageNew0000() {var xhttp = new XMLHttpRequest();xhttp.onreadystatechange = function() {if (this.readyState == 4 && this.status == 200) {
      var x = document.querySelectorAll(".lead0");
    x[0].innerHTML = this.responseText;}};

    xhttp.open("GET", "text/pageNew0000.txt", true);
    xhttp.send();}
function p0000() {var xhttp = new XMLHttpRequest();xhttp.onreadystatechange = function() {if (this.readyState == 4 && this.status == 200) {
      var x = document.querySelectorAll(".cosT");
x[0].innerHTML = Number(x[0].innerHTML) + Number(this.responseText);
x[1].innerHTML = Number(x[1].innerHTML) + Number(this.responseText);
x[2].innerHTML = Number(x[2].innerHTML) + Number(this.responseText);
x[3].innerHTML = Number(x[3].innerHTML) + Number(this.responseText);
x[4].innerHTML = Number(x[4].innerHTML) + Number(this.responseText);
x[5].innerHTML = Number(x[5].innerHTML) + Number(this.responseText);
x[6].innerHTML = Number(x[6].innerHTML) + Number(this.responseText);}};

    xhttp.open("GET", "text/p0000.txt", true);
    xhttp.send();}

…added in your solution to each line, and it works perfectly, thanks again. If I could tidy this up with a loop, to loop all instances of ‘cosT‘, job done, any suggestions very welcome.