CODEWITHSUNDEEP
javascripthtmlcss
Kahrin
Kahrin

Reputation: 3

Why isn't the javascript in my html working?

I'm running it in vscode and when I run my site, the spot where the javascript should be, is just a blank area. I tried a console.log message to test it and that isn't coming through either.

Here's where I'm trying to add a progress bar.

    <p class="infoBox">

            <h3>Skills</h3> 
            <h4>Computer Languages</h4>
            Java  <div id="container"></div></br>
            Python</br>

Here's my javascript. 

<script type="text/javascript" src="/require.js">
    console.log("Hello World!"); // a test for js and it's not showing up in chrome's console

    var ProgressBar = require('progressbar.js');

   var bar = new ProgressBar.Line(container, {
        strokeWidth: 4,
        easing: 'easeInOut',
        duration: 1400,
        color: '#FFEA82',
        trailColor: '#eee',
        trailWidth: 1,
        svgStyle: {width: '100%', height: '100%'}
      });

      bar.animate(1.0);
</script>

Here's my css.

#container {
  margin: 20px;
  width: 400px;
  height: 8px;
}

Here's what's coming up when I run it.

Upvotes: 0

Views: 58

Answers (4)

Kishan Suvarna
Kishan Suvarna

Reputation: 11

Since you are using the id of the div element to render the progress bar, you need to load the javascript code after the window is loaded.

index.js 

window.onload = function onLoad() {
  var bar = new ProgressBar.Line(container, {
    strokeWidth: 4,
    easing: 'easeInOut',
    duration: 1400,
    color: '#FFEA82',
    trailColor: '#eee',
    trailWidth: 1,
    svgStyle: { width: '100%', height: '100%' },
  });

  bar.animate(1.0);
};
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>ProgressBar.js - Minimal Example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <style>
      #container {
        margin: 20px;
        width: 400px;
        height: 8px;
      }
    </style>
  </head>
  <body>
    <p class="infoBox"></p>
    <h3>Skills</h3>
    <h4>Computer Languages</h4>
    <p>Java</p>
    <div id="container"></div>
    <p>Python</p>
    <script src="https://cdn.rawgit.com/kimmobrunfeldt/progressbar.js/0.5.6/dist/progressbar.js"></script>
    <script src="index.js"></script>
  </body>
</html>

Upvotes: 0

Vasyl Moskalov
Vasyl Moskalov

Reputation: 4630

According to your source variable container is undefined, so you try to set the progress bar to an empty container. So either assign value '#container' to your variable or just replace new ProgressBar.Line(container, with new ProgressBar.Line("#container",

And yes, you need to split and your script like 

<script src="/require.js"/>
<script>
  Your script here
</script>

Upvotes: 0

Matt
Matt

Reputation: 35231

If src is in the tag it will not read its contents. Simply remove the src and it should work.

Upvotes: 1

Tim Gerhard
Tim Gerhard

Reputation: 3607

You mixed something up. if you use <script src=""></script> you tell the browser to import a js library (in your case require.js). The contents between <script> and </script> are then ignored.

If you want to execute javascript code you have two options.

  1. Option 1: Inline Javascript like this:

<script src="require.js"></script>
<script>
  console.log("test")
</script>

  1. Option 2: Create your own .js file and extract the code there:

<script src="require.js"></script>
<script src="your_own_js_file.js"></script>

Upvotes: 1

Related Questions