When I'm using inline javascript code, everything works fine. As soon as I try to run the code from my script.js, it doesn't work anymore.
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). It didn't help though, I'm already using defer and I tried 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
^ this is my problem
Uncaught TypeError: Cannot read property 'addEventListener' of null
^ this is just annoying, but my page still works fine. Is it because of the SVG not loading fast enough or something like that?
EDIT:
Tippy works now, I created another external .js file and seperated the code for the SVG and tippy, and now it works. Looks like the problem is that I got
<script type="text/javascript" href="../script.js"></script>
in my SVG file. I don't really know why, since I'm new to this.
Though the "addEventListener" error ist still not gone.
2 Answers 2
You have to register the onload event on the object element and do your actions when it's fired.
First define an id for the object element:
<!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:
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.
7 Comments
Be sure to move the script tag at the HTML page end why? doesn't defer attribute result in the javascript being executed after the document has been parsed?<object id="svg" ... the id attribute?contentDocument to access object internal valuesHave you tried removing defer from the tippy.js script tag?
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. Scripts with defer never block the page.
It seems like your script.js file depends on tippy.js to work correctly.
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.
ebkindocument.getElementById('ebk')?document.getElementById('ebk')line, then thetippy('#myButton'could not possibly run - assuming the code you've shown isscript.js- so, there's no way you could get both errors