CODEWITHSUNDEEP
javascripthtml
user3566608
user3566608

Reputation: 353

Inline js works, external file doesn't

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.

Upvotes: 0

Views: 760

Answers (2)

TheGr8_Nik
TheGr8_Nik

Reputation: 3200

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.

Upvotes: 1

glneto
glneto

Reputation: 527

Have 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.

Upvotes: 0

Related Questions