内联 js 有效，外部文件无效
[英]Inline js works, external file doesn't
问题描述
When I'm using inline javascript code, everything works fine.
当我使用内联 javascript 代码时，一切正常。 As soon as I try to run the code from my script.js, it doesn't work anymore.一旦我尝试从我的 script.js 运行代码，它就不再工作了。
I already searched for this problem in google and it always ends up having something to do the DOM and onload or something like that (sorry I'm new to this whole html/css/js thing).我已经在 google 中搜索过这个问题，它总是最终会做一些事情来做 DOM 和 onload 或类似的事情（对不起，我对整个 html/css/js 的事情都是新手）。 It didn't help though, I'm already using defer and I tried onLoad.但这并没有帮助，我已经在使用 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!",
});
I get these errors:我收到这些错误：
Uncaught ReferenceError: tippy is not defined未捕获的 ReferenceError：tippy 未定义
^ this is my problem ^ 这是我的问题
Uncaught TypeError: Cannot read property 'addEventListener' of null未捕获的类型错误：无法读取 null 的属性“addEventListener”
^ this is just annoying, but my page still works fine. ^ 这很烦人，但我的页面仍然可以正常工作。 Is it because of the SVG not loading fast enough or something like that?是因为 SVG 加载速度不够快还是类似的原因？
EDIT:编辑：
Tippy works now, I created another external.js file and seperated the code for the SVG and tippy, and now it works. Tippy 现在可以工作了，我创建了另一个 external.js 文件并将 SVG 和 tippy 的代码分开，现在它可以工作了。 Looks like the problem is that I got看起来问题是我得到了
<script type="text/javascript" href="../script.js"></script>
in my SVG file.在我的 SVG 文件中。 I don't really know why, since I'm new to this.我真的不知道为什么，因为我是新手。
Though the "addEventListener" error ist still not gone.虽然“addEventListener”错误仍然没有消失。
2 个解决方案
解决方案1
1 已采纳 2019-11-02 22:45:55
You have to register the onload event on the object element and do your actions when it's fired.您必须在 object 元素上注册onload事件，并在它被触发时执行您的操作。
First define an id for the object element:首先为 object 元素定义一个 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>
Then register the onload event on the object:然后在 object 上注册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!",
});
}
Be shure to move the script tag at the HTML page end.请务必在 HTML 页面末尾移动脚本标签。
解决方案2
0 2019-11-02 22:51:30
Have you tried removing defer from the tippy.js script tag?您是否尝试tippy.js脚本标签中删除defer ？
The defer attribute tells the browser that it should go on working with the page, and load the script “in background”, then run the script when it loads.
It seems like your script.js file depends on tippy.js to work correctly.您的 script.js 文件似乎依赖于 tippy.js 才能正常工作。
And for:对于：
Uncaught TypeError: Cannot read property 'addEventListener' of null
Seems like you don't have any HTML element with ID 'ebk', so you can't attach an event to an element that doesn't exist.似乎您没有任何 ID 为“ebk”的 HTML 元素，因此您无法将事件附加到不存在的元素。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.