Fatal编程技术网
  • javascript/
  • Javascript JS不使用HTML（基本）

Javascript JS不使用HTML（基本）

javascript html css

Javascript JS不使用HTML（基本）,javascript,html,css,Javascript,Html,Css,首先，我是个新手。我一直在尝试创建一个JS文件，其中包含要在HTML文件中使用的所有文本变量（以及其他函数）。我的JS文件与我的HTML文件位于同一目录中（C:/websites/first）。我的CSS文件已经链接并正常工作，让我弄不明白为什么这不起作用 我尝试过使用这些帖子和其他一些帖子的答案，但运气不佳： 我在这里试图做的是将我的设置为包含我的全名变量。一旦我得到这个，我的其他问题也应该得到解决 下面是我的JS的一个片段： var fullname = "example";

首先，我是个新手。我一直在尝试创建一个JS文件，其中包含要在HTML文件中使用的所有文本变量（以及其他函数）。我的JS文件与我的HTML文件位于同一目录中（C:/websites/first）。我的CSS文件已经链接并正常工作，让我弄不明白为什么这不起作用

我尝试过使用这些帖子和其他一些帖子的答案，但运气不佳：

我在这里试图做的是将我的

设置为包含我的全名变量。一旦我得到这个，我的其他问题也应该得到解决

下面是我的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>
我找不到我做错了什么。我一直在胡思乱想，因为它太简单了，但我还没有找到解决方案。

将脚本放在DOM中的元素之后，否则当您试图获取它们时，这些元素就不存在了

<html>
    <head>
    </head>
    <body>
        <p id="fullname"></p>
        <script type="text/javascript" src="script.js"></script>
    </body>
</html>
或者在现代浏览器中

document.addEventListener("DOMContentLoaded", function(event) {
    var fullname = "example";
    document.getElementById('fullname').innerHTML = fullname;
});
脚本执行时，DOM中尚不存在
#fullname
元素。您需要延迟脚本的执行，或者重新组织HTML，以便在创建
#fullname
元素后调用脚本

使用 延迟使用回调（无库） HTML:
哇！非常感谢。你能给我一个快速的解释，为什么它应该在之后？我一直认为链接和脚本引用应该在head中，因为脚本正在尝试获取DOM中的元素，但是脚本和其他元素是按照它们出现的顺序解析和执行的，当脚本出现在您试图使用getElementById获取的元素之前时，该元素还没有被解析，所以它是不存在的。有几个答案会有帮助，但是如果你想使用变量，我可以建议你使用PHP吗？JS发生在客户端而不是服务器端，这意味着它发生在页面发送到用户浏览器之后。当信息放在页面上时，他们可能会看到一个闪光。@AndyM我想OP是在学习javascript。PHP与此无关。我还没有开始学习PHP，但我想我现在就要开始学习了，这似乎是我想要做的事情必须要做的。这是相关的，因为PHP比JS更适合OP尝试使用（HTML中的变量），原因如下。但这并不是一个答案，这就是我为什么要发表评论的原因。引用官方政策：[评论应用于]“在帖子中添加相关但次要或暂时的信息”我从不喜欢将字符串硬编码到代码中，但查看大多数网站的源代码，这不是格式。我应该把我的字符串硬编码到我的html中吗？这两种方法都有效，我以前从未遇到过像这样的延迟，这很有意义！非常感谢。 
document.addEventListener("DOMContentLoaded", function(event) {
    var fullname = "example";
    document.getElementById('fullname').innerHTML = fullname;
});

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

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

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

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

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