2

我想要做的是在网站上的几张卡片上添加进度条。我正在使用 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 问题，例如： 如何获取/更改 HTML5 进度条的值？ 但无法弄清楚如何改变它以满足我的需求。

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

4

2 回答 2

0

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

于 2021-05-23T01:21:01.903 回答
0

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

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

于 2021-05-22T04:49:04.433 回答