2

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.

Confused Teddy
  • 21
  • 2
  • please put the html part as well – sid Jul 04 '21 at 14:16
  • It’s part of a nav Sid, 7 variations of ‘sidenav’, 7 products… I’ve edited in one section above. – Confused Teddy Jul 04 '21 at 14:37
  • The title is a bit misleading; you're not writing a SUM function for an HTTP GET request. You're writing a sum function for text in HTML and text retrieved from an HTTP GET request's response. The answer is to add the numeric values together; `x[n].innerHTML = Number(x[n].innerHTML) + Number(this.responseText);`. – Heretic Monkey Jul 04 '21 at 14:44
  • Does this answer your question? [Adding two numbers concatenates them instead of calculating the sum](https://stackoverflow.com/questions/14496531/adding-two-numbers-concatenates-them-instead-of-calculating-the-sum) – Heretic Monkey Jul 04 '21 at 14:45
  • May well do Heretic but a bit confused as to integrate it with querySelectorAll, I changed the title thanks… – Confused Teddy Jul 04 '21 at 14:52
  • I’ll give your solution a try Heretic, going in the right direction now I hope, thank you. – Confused Teddy Jul 04 '21 at 15:06
  • Thanks @HereticMonkey see last edit, guess that’s what you had in mind, works a treat–thank you very much. I’ll give it until the morning, see if anyone suggests a loop in the meantime, then mark it closed. – Confused Teddy Jul 04 '21 at 17:30

2 Answers2

0

Well, you could sum them with parseFloat.

x[0].innerHTML = this.responseText + parseFloat(document.getElementsByClassName("cosT")[0].textContent);

Working fiddle: https://jsfiddle.net/6jpdtyuh/1/

sid
  • 1,779
  • 8
  • 10
0

Thanks to the rapid responses from Heretic and Sid I got two solutions to keep in my resources, both work perfectly, I opted for Heretic’s solution for my project–for no better reason than it looks ‘simpler’ to me.

    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();}

EDIT: For anyone that might be following up in the future, had an issue with the above function when the onClick was activated 5 times, the decimal places went to 14 or so, so added in ‘parseFloat’ & ‘.toFixed(2)’ as below, which fixed the problem.

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

xhttp.open("GET", "text/p0000.txt", true);
    xhttp.send();}
Confused Teddy
  • 21
  • 2