2

What I'm trying to do is add progress bars to several cards I have on a website. I'm using Processwire CMS (which utilizes PHP) to generate my cards and each card has a progress element, a raised amount, and a goal amount like so:

<progress class="progressBar" id="progressbar<?php echo $currentSection; ?>" value="0" max="100"></progress>

<span id="raisedNum<?php echo $count; ?>" class="hidden">
    <?php echo $raised; ?>
</span>

<span id="goalNum<?php echo $count; ?>" class="hidden">
    <?php echo $goal; ?>
</span>

These elements are all wrapped in a loop that generates my cards. I am then trying to grab the values in the id="raisedNum" and "goalNum" spans using Javascript, divide the goal amount by the raised amount, and then insert that number back into the Progress "value" attribute.

Here is the Javascript code I have thus far, that doesn't work:

do {
var count = 0;
var raised = document.getElementById("raisedNum".count);
var goal = document.getElementById("goalNum".count);

raised2 = parseInt(raised);
goal2 = parseInt(goal);
var percent = goal2 / raised2;

document.getElementById("progressbar".count).value += percent;

count++; } while (raised != null);

I'm very new to Javascript and would really appreciate any help to figure this out.

Also, I used a defer attribute on my Javascript import tag but am not sure if I should or not. I imagine that I need the script to run after all of the cards have been loaded so that it can grab the values; however, it still needs to change those values after it does the math and generates the percentage values.

I've looked at similar StackOverflow questions like this: How to get / change value of HTML5 progress bar? but couldn't figure out how to change it to meet my needs.

Thanks in advance for any helpful replies!

spercy16
  • 33
  • 5
  • Why not do the calculation in PHP and output the value with the rest of the HTML? `` No need for JS, right? – kmoser May 22 '21 at 04:07
  • I originally tried to do everything in PHP, which I agree would be the ideal method. The problem I'm currently experiencing is that PHP sees $raised and $goal as strings no matter what I do. In Processwire I use this code `$raised = $page->get("raisedAmount$count");` to get the value of raised but when I try to typecast it to an integer, it says that number is 0, regardless of what's actually stored in the raisedAmount$count value. I have 40,000 stored in one of the fields but after typecasting them integers it changes it to 0 instead of 40000. I echoed the value which confirmed this. – spercy16 May 22 '21 at 05:06
  • `echo` won't tell you the data type. What happens when you `var_dump($raised)` and `var_dump($goal)`? – kmoser May 22 '21 at 05:09
  • For some crazy reason, the parseInt function wasn't working to typecast the strings to integers so that I could use them to get the percentage. After figuring out I could change them in the CMS to integers, I was easily able to calculate it and use it in my progress element's value field. Problem solved, thanks for the responses though! – spercy16 May 23 '21 at 01:20

2 Answers2

0

You used the . operator from PHP to concat two variables. In JavaScript, you need to use the + operator: var raised = document.getElementById("raisedNum" + count);

If you put a period after any object in JavaScript, it will try to get that property of it. "raisedNum".count would give the count property of the string, but that doesn't exist, so JavaScript wants to get an element by an undefined id, but there's no element with undefined id. Then, you call .value, but it will throw an error because you can't read the value of null.

Axwabo
  • 49
  • 7
  • Yeah, like I said I'm a noob with JS. I tried changing the code to use the + operator instead of a . but it's still not working. – spercy16 May 22 '21 at 05:01
0

I actually figured out how to do this entirely using PHP. I was initially having trouble typecasting the strings to integers but after realizing that I could change the field types to integers, didn't need to do any typecasting and was able to quickly create a formula that gave me the percentage from value/raised and insert it into the value attribute of my Progress tag. Thanks you all for all of the responses though!

spercy16
  • 33
  • 5