Javascript 内联js工作，外部文件不工作_Javascript_Html

Javascript 内联js工作，外部文件不工作

javascript html

Javascript 内联js工作，外部文件不工作,javascript,html,Javascript,Html,当我使用内联javascript代码时，一切正常。一旦我尝试从script.js运行代码，它就不再工作了我已经在google上搜索过这个问题了，它总是会有一些东西来处理DOM和onload之类的东西。对不起，我对整个html/css/js都是新手。但这并没有帮助，我已经在使用“延迟”，并尝试了“加载” 我的纽扣 /*SVG*/ document.getElementById'ebk'.addEventListener'mouseover'，函数{ this.style.fill=红色； };

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

我已经在google上搜索过这个问题了，它总是会有一些东西来处理DOM和onload之类的东西。对不起，我对整个html/css/js都是新手。但这并没有帮助，我已经在使用“延迟”，并尝试了“加载”

我的纽扣 /*SVG*/ document.getElementById'ebk'.addEventListener'mouseover'，函数{ this.style.fill=红色； }; document.getElementById'ebk'。addEventListener'mouseout'，函数{ this.style.fill=黑色； }; tippy'myButton'{ 内容：我是一个提示！， }; 我发现以下错误：

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

^这是我的问题

未捕获的TypeError:无法读取null的属性“addEventListener”

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

编辑：

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

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

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

您必须在对象元素上注册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>

请舒尔移动HTML页面末尾的脚本标记。

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

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

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

以及：

Uncaught TypeError: Cannot read property 'addEventListener' of null

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

您运行代码太早了。将JS文件放在文档末尾，在结束正文标记之前或将其包装在窗口中。加载函数我尝试了这两种方法，但都没有帮助。ID为ebk的元素在文档中的何处。getElementById'ebk'？它在SVG文件中，因为脚本在文档中失败。getElementById'ebk'行，然后tippy'myButton'可能无法运行-假设您显示的代码是script.js-因此，您无法同时获得这两个错误。请确保在HTML页面末尾移动脚本标记为什么？defer属性是否会导致在解析文档后执行javascript？谢谢，但现在它显示Uncaught TypeError:无法将属性“onload”设置为null。@user3566608-您注意到@user3566608对象元素的id与getElementById中使用的id相等吗？@user3566608我进行了编辑，您必须使用contentDocument来访问对象的内部值。我尝试了各种不同的组合，但遗憾的是，它仍然不起作用ebk'在我正在加载的SVG文件中。代码实际上是有效的，我只是想知道为什么错误会不断出现。@user3566608这应该有效，我将您的script.js包装在document.onload函数中。

Uncaught TypeError: Cannot read property 'addEventListener' of null