如何从 PHP 生成的 div 中获取值并使用 Javascript 然后更改进度条 HTML5 元素的宽度？

Question

我想要做的是在网站上的几张卡片上添加进度条。 我正在使用 Processwire CMS（它使用 PHP）来生成我的卡片，每张卡片都有一个进度元素、一个筹集的金额和一个目标金额，如下所示：

<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>

这些元素都包裹在一个生成我的卡片的循环中。 然后，我尝试使用 Javascript 获取 id="raisedNum" 和 "goalNum" 跨度中的值，将目标金额除以筹集的金额，然后将该数字插入到 Progress “value”属性中。

这是我到目前为止的 Javascript 代码，它不起作用：

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

我对 Javascript非常陌生，非常感谢任何帮助解决这个问题。

另外，我在我的 Javascript 导入标签上使用了 defer 属性，但不确定我是否应该这样做。 我想我需要在加载所有卡片后运行脚本，以便它可以获取值； 但是，它仍然需要在计算并生成百分比值后更改这些值。

我看过类似的 StackOverflow 问题，例如： How to get / change value of HTML5 progress bar? 但无法弄清楚如何改变它以满足我的需求。

提前感谢您提供任何有用的回复！

Answer 1

你使用了. 来自 PHP 的运算符连接两个变量。 在 JavaScript 中，需要使用+运算符： var raised = document.getElementById("raisedNum" + count);

如果您在 JavaScript 中的任何 object 之后放置一个句点，它将尝试获取它的该属性。 "raisedNum".count将给出字符串的count属性，但它不存在，因此 JavaScript 想要通过未定义的 id 获取元素，但没有未定义 id 的元素。 然后，您调用.value ，但它会抛出错误，因为您无法读取null的值。

Answer 2

我实际上想出了如何完全使用 PHP 来做到这一点。 最初我在将字符串类型转换为整数时遇到了麻烦，但在意识到我可以将字段类型更改为整数之后，不需要进行任何类型转换，并且能够快速创建一个公式，该公式为我提供了从 value/raised 和 insert 的百分比将其放入我的 Progress 标签的 value 属性中。 谢谢大家的所有回复！