Question

当我使用内联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!",
});

我得到这些错误：

未捕获的ReferenceError：未定义tippy

^这是我的问题

未捕获的TypeError：无法读取null的属性'addEventListener'

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

编辑：

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

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

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

尽管“ addEventListener”错误仍然没有消失。

Answer 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页面末尾移动脚本标签。

Answer 2

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

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

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

对于：

Uncaught TypeError: Cannot read property 'addEventListener' of null

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

内联js有效，外部文件不起作用

2 个答案: