使用在外部文件中创建的 <span> 值

Using <span> value that is created in an external file

本文关键字：span 创建 外部 文件      更新时间：2023-09-26

我有两个文件：一个名为simplecart.js的javascript文件，它创建了一个值，该值以<span id="quantity" class="simpleCart_quantity"></span>显示在我拥有的另一个文件，一个html文件中。html 文件包含以下代码：

<span id="quantity" class="simpleCart_quantity"></span>
<span id="quantityText"></span>
  <script type="text/javascript">
    var quantity = document.getElementById("quantity"),
        quantityText = document.getElementById("quantityText");
    if (parseInt(quantity.innerHTML, 10) === 1) {
        quantityText.innerHTML = "article";
    } else {
        quantityText.innerHTML = "articles";
    }
</script>

问题是：似乎代码无法获取<span id="quantity" class="simpleCart_quantity"></span>之间的值（请记住，该值是在外部文件 simplecart.js 中创建的），现在始终显示"文章"，因为它无法看到该值是否为"1"。

我希望有人可以帮助我解决这个问题，多谢！

根据 simplecart.js 文件的外观，html 文件中的 javascript 代码很可能运行得太早（在文档实际准备就绪之前）。你应该延迟任何 DOM 操作，例如使用（或使用 jquery）：

document.onload = function () {
    var quantity = document .......
}
最好

为此使用绑定库（如 Angular.js），但您可以定期更新字段作为快速解决方案：

var updatePlural = function () {
    var quantity = document .......
}
setInterval(updatePlural, 250); // every 250ms

您需要延迟运行 JS，直到用数据填充跨度的 JS 运行之后。

由于脚本元素紧随其后出现，因此它将立即拉取值。没有更好的方法来确保其他JS不会首先运行。

如何将JS延迟到最佳时刻的细节将取决于simplecart.js中的相关代码何时运行，

相关文章：