JS与HTML不工作（基础）

Question

JS与HTML不工作（基础）

3

首先，我是一个初学者。我一直在尝试创建一个JS文件，以包含所有我的文本变量，以便在HTML文件中使用（除其他功能外）。我的JS文件位于与HTML文件相同的目录中（C:/websites/first）。我的CSS文件已链接并正常工作，这让我感到困惑，为什么这不起作用。

我尝试了这些帖子和其他几个帖子的答案，但没有成功：使用Javascript设置HTML内容如何在JavaScript中更改span元素的文本如何将变量从外部JavaScript传递到HTML表单我在这里尝试的是将我的

设置为包含我的fullname变量。一旦我做到这一点，我的其余问题也应该得到解决。

以下是我的JS代码片段：

    var fullname = "example";
    document.getElementById('fullname').innerHTML = fullname;

和我的HTML片段：

    <html>
     <head>
        <script type="text/javascript" src="script.js"></script>
     </head>
     <body>
        <p id="fullname"></p>
     </body>
    </html>

我找不到我的错误。这么简单的问题却没有解决方案，让我非常苦恼。

- user3524785

有几个答案可以帮助你，但如果你想使用变量，我建议使用PHP。JS发生在客户端而不是服务器端，这意味着它发生在页面发送到用户浏览器之后。他们可能会看到信息被放置在页面上的闪光。 - Kelderic

1

@AndyM 我认为OP正在尝试学习JavaScript。PHP与此无关。 - Carrie Kendall

我还没有开始学习PHP，但我想现在就开始，因为对于我想做的事情来说似乎相当必要。 - user3524785

这与问题相关，因为对于 OP 尝试做的事情（在 HTML 中使用变量），PHP 比 JS 更好，原因如上所述。但这不是一个答案，这就是我使用评论的原因。引用官方政策：“[评论应该用于]向帖子添加相关但次要或短暂的信息”。 - Kelderic

我从来不喜欢在代码中硬编码字符串，但看到大多数网站的源代码，这似乎是常见的格式。我应该把我的字符串硬编码到HTML中吗？ - user3524785

2个回答

2

当脚本执行时，#fullname 元素尚不存在于DOM中。您需要延迟脚本的执行，或重新组织HTML以便在创建#fullname元素之后调用脚本。

使用`[defer]`属性进行延迟示例

<html>
 <head>
    <script type="text/javascript" src="script.js" defer></script>
    <!--                                           ^^^^^       -->
 </head>
 <body>
    <p id="fullname"></p>
 </body>
</html>

重新组织示例

<html>
 <head>
 </head>
 <body>
    <p id="fullname"></p>
    <script type="text/javascript" src="script.js"></script>
 </body>
</html>

推迟使用回调函数（为方便起见，使用jQuery）

_HTML:

<html>
 <head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="script.js"></script>
 </head>
 <body>
    <p id="fullname"></p>
 </body>
</html>

_script.js:

jQuery(function ($) {
    var fullname = "example";
    $('#fullname').html(fullname);
});

延迟使用回调函数（不使用库）

_HTML:

<html>
 <head>
    <script src="script.js"></script>
 </head>
 <body>
    <p id="fullname"></p>
 </body>
</html>

_script.js:

window.addEventListener('load', function () {
    var fullname = "example";
    document.getElementById('fullname').innerHTML = fullname;
}, false);

- zzzzBov

这两种方法都可以，我以前从未遇到过像defer这样的东西，很有道理！谢谢！ - user3524785

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- adeneo · Accepted Answer

将脚本放在DOM元素后面，否则当你尝试获取它们时，这些元素将不存在。

<html>
    <head>
    </head>
    <body>
        <p id="fullname"></p>
        <script type="text/javascript" src="script.js"></script>
    </body>
</html>

另一个（不是很好的）选项是等待加载完成。

window.onload = function() {
    var fullname = "example";
    document.getElementById('fullname').innerHTML = fullname;
}

或者在现代浏览器中。

document.addEventListener("DOMContentLoaded", function(event) {
    var fullname = "example";
    document.getElementById('fullname').innerHTML = fullname;
});

JS与HTML不工作（基础）

使用[defer]属性进行延迟示例

重新组织示例

推迟使用回调函数（为方便起见，使用jQuery）

延迟使用回调函数（不使用库）

使用`[defer]`属性进行延迟示例