What is causing the javascript code in my html to not function properly?

Question

What is causing the javascript code in my html to not function properly?

I have been testing my site in vscode, but the section where the javascript should be displayed appears blank when running it. I even tried using a console.log message for testing purposes, but that is also not showing up.

This is where I am working on adding a progress bar:

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

This is the javascript code I am using:

<script type="text/javascript" src="/require.js">
    console.log("Hello World!"); // Testing js functionality - not appearing 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>

Below is the CSS being used:

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

Here is what displays when I run the site.

javascript html css

Answer 1

Answer №1

It seems like there was a mix-up in your code. When you use

<script src=""></script>

, you are essentially telling the browser to import a JavaScript library (such as require.js). Anything between the opening and closing <script> tags will be ignored.

If you want to actually execute JavaScript code, you have two options:

Option 1: Inline Javascript example:

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

Option 2: Create your own .js file and reference it in your HTML:

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

Answer 2

It seems like there was a mix-up in your code. When you use

<script src=""></script>

, you are essentially telling the browser to import a JavaScript library (such as require.js). Anything between the opening and closing <script> tags will be ignored.

If you want to actually execute JavaScript code, you have two options:

Option 1: Inline Javascript example:

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

Option 2: Create your own .js file and reference it in your HTML:

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

Answer 3

Answer №2

When the src attribute is present within a tag, it can prevent the contents from being read properly. To fix this issue, just delete the src attribute and everything should function correctly.

Answer 4

When the src attribute is present within a tag, it can prevent the contents from being read properly. To fix this issue, just delete the src attribute and everything should function correctly.

Answer 5

Answer №3

The variable container in your source appears to be undefined, which is why you are attempting to set the progress bar to an empty container. To fix this issue, either assign the value '#container' to your variable or replace new ProgressBar.Line(container, with

new ProgressBar.Line("#container",

Additionally, make sure to separate the HTML and JavaScript portions of your code like so:

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

Answer 6

The variable container in your source appears to be undefined, which is why you are attempting to set the progress bar to an empty container. To fix this issue, either assign the value '#container' to your variable or replace new ProgressBar.Line(container, with

new ProgressBar.Line("#container",

Additionally, make sure to separate the HTML and JavaScript portions of your code like so:

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

Answer 7

Answer №4

To ensure that the progress bar renders correctly using the div element's ID, you should load the JavaScript code after the window has finished loading.

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>

Answer 8

To ensure that the progress bar renders correctly using the div element's ID, you should load the JavaScript code after the window has finished loading.

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>

What is causing the javascript code in my html to not function properly?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Modify the content of a table cell once the hyperlink in a different cell on the corresponding row is selected

The issue with jQuery's .after() method is that it is inserting content as a string instead

Can Vue2-Google-Maps dynamically load API keys using props?

Adding a jPlayer on the fly

Grabbing <object> HTML using jQuery

Utilizing the push method to add a JavaScript object to an array may not be effective in specific scenarios

Extract keys from the string

React Material-UI TextField with Throttling

Angular 6: Issue with displaying data on the user interface

Javascript - WebSocket client encountering issues with onmessage event not triggering upon receiving a large response from the server

Choosing a Date using a DateTimePicker

Angular encounters an issue where it is unable to access a property within a directive

Ember.js alternative for Angular's filter for searching through ng-models

Display the keyboard on IOS when an input field is selected

View saved local storage information

The CSS code ".btn btn-primary * { visibility: hidden; } is failing to work as intended

"Troubleshooting the failure of the alert function to work properly when loading content

Is it possible to verify if an event occurred within a specific hour, regardless of the date using Moment.js?

What is the best way to remove text messages from a channel that only allows images?

The functionality of two-way binding in a distinct controller is not functioning properly when integrated with angular-wizard