Why isn't the javascript in my html working?
Question
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;
}
4 answers
solution1
1 ACCPTED 2020-06-13 06:40:27
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.
- Option 1: Inline Javascript like this:
<script src="require.js"></script> <script> console.log("test") </script>
- 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>
solution2
1 2020-06-13 06:40:40
If src is in the tag it will not read its contents. Simply remove the src and it should work.
solution3
0 2020-06-13 06:40:45
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>
solution4
0 2020-06-13 07:08:20
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.