内联js有效，外部文件无效答案

【问题标题】：Inline js works, external file doesn't内联js有效，外部文件无效
【发布时间】：2019-11-02 22:34:39
【问题描述】：

当我使用内联 javascript 代码时，一切正常。一旦我尝试从我的 script.js 运行代码，它就不再工作了。

我已经在 google 中搜索过这个问题，但它总是最终需要做一些事情来做 DOM 和 onload 或类似的事情（对不起，我对整个 html/css/js 的事情都是新手）。但这并没有帮助，我已经在使用 defer 并尝试了 onLoad。

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://unpkg.com/tippy.js@5/dist/backdrop.css">
    <link rel="stylesheet" href="style.css">
    <script defer src="https://unpkg.com/popper.js@1"></script>
    <script defer src="https://unpkg.com/tippy.js@5"></script>
    <script defer src="script.js"></script>
  </head>
  <body>
    <div class="container">

      <button id="myButton" class="button" title="button">My Button</button>   

      <div class="columns svg">
        <div class="column is-one-third">
          <div class="box">
            <object type="image/svg+xml" data="SVG/Abbildung1.svg"></object> 
          </div>
        </div>

    </div> 
  </body>
</html>

/* SVG */ 
document.getElementById('ebk').addEventListener('mouseover', function(){
   this.style.fill = "red";
});
document.getElementById('ebk').addEventListener('mouseout', function(){
   this.style.fill = "black";
});
tippy('#myButton', {
   content: "I'm a Tippy tooltip!",
});

我收到以下错误：

未捕获的引用错误：未定义tippy

^这是我的问题

未捕获的类型错误：无法读取 null 的属性“addEventListener”

^ 这很烦人，但我的页面仍然可以正常工作。是因为 SVG 加载速度不够快还是类似的原因？

编辑：

Tippy 现在可以工作了，我创建了另一个外部 .js 文件并将 SVG 和 tippy 的代码分开，现在它可以工作了。看起来问题是我得到了

<script type="text/javascript" href="../script.js"></script>

在我的 SVG 文件中。我真的不知道为什么，因为我是新手。

虽然“addEventListener”错误仍未消失。

【问题讨论】：

您的代码运行得太早了。将您的 JS 文件放在文档的末尾，在结束 body 标记之前或将其包装在 window.load 函数中
我都试过了，没用。
document.getElementById('ebk') 中 ID 为 ebk 的元素在哪里？
它在一个 SVG 文件中，它是一个
因为您的脚本在 document.getElementById('ebk') 行失败，所以 tippy('#myButton' 不可能运行 - 假设您显示的代码是 script.js - 所以，你不可能同时获得两者错误

标签： javascript html

【解决方案1】：

您必须在对象元素上注册onload 事件并在它被触发时执行您的操作。

首先为对象元素定义一个id：

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://unpkg.com/tippy.js@5/dist/backdrop.css">
    <link rel="stylesheet" href="style.css">
    <script defer src="https://unpkg.com/popper.js@1"></script>
    <script defer src="https://unpkg.com/tippy.js@5"></script>
    <script defer src="script.js"></script>
  </head>
  <body>
    <div class="container">

      <button id="myButton" class="button" title="button">My Button</button>   

      <div class="columns svg">
        <div class="column is-one-third">
          <div class="box">
            <object id="svg" type="image/svg+xml" data="SVG/Abbildung1.svg"></object> 
          </div>
        </div>

    </div> 
  </body>
</html>

然后在对象上注册onload事件：

var svg = document.getElementById('svg')
svg.onload = function () {
var svgDoc = svg.contentDocument;  // Access to object document
/* SVG */ 
svgDoc.getElementById('ebk').addEventListener('mouseover', function(){
   this.style.fill = "red";
});
svgDoc.getElementById('ebk').addEventListener('mouseout', function(){
   this.style.fill = "black";
});
tippy('#myButton', {
   content: "I'm a Tippy tooltip!",
});
}

请务必在 HTML 页面末尾移动脚本标记。

【讨论】：

Be sure to move the script tag at the HTML page end 为什么？ defer 属性不会导致在文档被解析后执行 javascript 吗？
谢谢，但现在它显示“未捕获的类型错误：无法设置属性 'onload' of null”。
@user3566608 - 你注意到<object id="svg" ... id 属性了吗？
@user3566608 对象元素的 id 等于 getElementById 中使用的那个？
@user3566608 我进行了编辑，您必须使用contentDocument 访问object 内部值

【解决方案2】：

您是否尝试过从tippy.js 脚本标签中删除defer？

defer 属性告诉浏览器它应该继续处理页面，并“在后台”加载脚本，然后在加载时运行脚本。带有 defer 的脚本永远不会阻塞页面。

您的 script.js 文件似乎依赖于 tippy.js 才能正常工作。

对于：

Uncaught TypeError: Cannot read property 'addEventListener' of null

您似乎没有任何 ID 为“ebk”的 HTML 元素，因此您无法将事件附加到不存在的元素。

【讨论】：

我试过了，各种不同的组合，但遗憾的是它仍然不起作用。 'ebk' 在我正在加载的 SVG 文件中。代码确实有效，我只是想知道为什么错误不断弹出。
@user3566608 codesandbox.io/s/58675881-lp1l4 这应该可以，我将您的 script.js 包装在 document.onload 函数中。