I am attempting to incorporate a dynamic progress bar by utilizing Bootstrap's progressbar and creating a custom JavaScript file. The goal is to continuously adjust the width of the progress bar at regular intervals to give the appearance of a moving or running progress bar. However, when I try to trigger my JavaScript function using the onclick event of a button, it fails to execute the function defined in my JS file. Additionally, the CSS code I have written seems to be disregarded. Below is an example of the code I am working with:
The head section of my HTML file -
`<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
{% load static %}
<link rel="stylesheet" href="{% static 'file1.css' %}" />
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="{% static 'first.js' %}"></script>
</head>`
My js file code -
`function status_move() {
console.log("hsdfs")
var elem = document.getElementByClassName('myBar');
elem.style.display = 'block';
console.log(elem2.style.display);
var elem2 = document.getElementByClassName('myProgress');
console.log(elem2.style.display);
elem2.style.display = 'none';
}`
//Random print statements used for testing JavaScript function invocation.
Progressbar implementation -
`<div class="myBar" style="
display: block;
position: fixed;
width: 100%;
height: 50px;
background-color: white;
margin-top: 0px;
">
<div class="myProgress" style="display: block">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75"
aria-valuemin="0" aria-valuemax="100" style="width: 10%">
Preparing Your Document
</div>
</div>
</div>`
Button triggering the JavaScript function -
`<form action="/view/" method="POST">
{% csrf_token %}
<button class="button-73" onclick=status_move() value="{{n.6}}" name="b2" role="button">
View
</button>
</form>`
Upon clicking the button, there are no console outputs, indicating that my JavaScript file is not being called.