如何从外部 JavaScript 设置 HTML 元素的值

How to set the value for an HTML element from external javascript

本文关键字：元素 HTML 设置 从外部 JavaScript      更新时间：2023-09-26

我正在使用带有函数setval()的外部javascript文件(例如：myjs.js(来设置HTML标签的innerText属性。

我有带有<lable id="abc"></lable>的PHP页面，并且我已经<head>部分中包含了myjs.js。 myjs.js包含在另一个 PHP 文件的<head>部分中，我从该文件调用setval()，因此当它运行时，它必须在第一个 PHP 文件中设置 lable innerText。

有可能实现吗？任何建议将不胜感激。我希望我把问题说清楚了。

谢谢

理想情况下，将包含myjs.js移动到页面底部(就在结束</body>标记之前或之后(。那么它只是：

document.getElementById("abc").innerText = /* ...the text */;

现场示例 | 来源

如果由于某种原因无法移动包含，则可以将上面的代码放在函数中，例如：

function updateTheLabel() {
    document.getElementById("abc").innerText = /* ...the text */;
}

。然后将此脚本放在标签之后：

<label id="abc"></label>
<script>
updateTheLabel();
</script>

现场示例 | 来源

如果您不想这样做(这有点丑陋，像这样将脚本标签混合到标记中(，您可以等待页面准备就绪时发生的某种事件。搜索"javascript dom ready event"，你会看到很多关于这个问题的讨论，以及很多解决方案。如果您使用的是库 jQuery、Prototype 或其他几个库中的任何一个，那么该库为您提供一些东西的可能性很高(但不是 100%(。您可能不想等待 window load 事件，因为它在页面加载过程中很晚(在加载所有外部资源 (图像等 (之后(触发。

(

在不知道你正在使用什么库(如果有的话(的情况下，无法做上述的活生生的例子;但同样，那里有几十个"dom ready"解决方案。

或者我想最坏的情况是，你可以投票，在myjs.js使用它：

function updateTheLabel() {
    var elm = document.getElementById("abc");
    if (elm) {
        elm.innerText = /* ...the text */;
    }
    else {
        setTimeout(updateTheLabel, 50);
    }
}
setTimeout(updateTheLabel, 0);

现场示例 | 来源

相关文章：