Difficulty integrating Bootstrap with JavaScript file in Visual Studio Code

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.

Answer №1

STEP 1

If the button is moved out of the <form>, an error will occur:

document.getElementByClassName is not a function
.

To fix this issue...

var elem = document.getElementByClassName('myBar');

...adjust it to this.

var elem = document.getElementsByClassName('myBar')[0];

STEP 2

The next error message you may encounter is:

Cannot read properties of undefined (reading 'style')
.

In order to resolve this, make sure to change the sequence. Don't attempt to console log before setting the style attribute.

Incorrect:

console.log(elem2.style.display);
elem2.style.display = 'none';

Correct way:

elem2.style.display = 'none';
console.log(elem2.style.display);

Refer to the example below.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Customizing the navbar to be inverse on each webpage using CSS, PHP, and Bootstrap

Dealing with a Bootstrap navbar across multiple pages on my website is becoming a hassle. Every time I need to make a change, I find myself jumping from one page to another just to update it. My objective is to have the ability to edit the navbar in one ce ...

display a loading spinner for number input fields in HTML5

In my HTML5 project, I am currently utilizing a numeric control (input type="number"). The default behavior displays the spinner (up and down arrows) only on hover. Is there a way to make the spinner permanently visible using CSS or another method? ...

Error displayed inline

I am facing an issue with a hidden textbox that I need to make visible based on a certain condition. Despite checking that the control is being triggered by the change event, I am unable to get it to display. I have experimented with different methods with ...

Asynchronous operations and recursive functions in the world of Node.js

When working with express and mongoose, I frequently find myself needing to perform batch operations on collections. However, the typical approach involves callbacks in nodejs concurrency coding, which can be cumbersome. // given a collection C var i = 0 ...

What sets the Event and EventHandler apart from each other in terms of functionality?

I am posting this question to gain clarity on the fundamental distinctions and practical applications of the Event versus EvenHandler. ...

Create JavaScript variable from either HTML or database sources

Hello, I am trying to implement a counter that retrieves its value from a JavaScript file, but I would like to customize it. Below is the JavaScript code: function updateCounter(count) { var divisor = 100; var speed = Math.ceil(count / divisor); ...

React Semantic UI Grid and Div components can be toggled by using a button to decrease

My goal is to create a menu that initially displays with a certain width, but when a button is clicked, it will decrease the width to 50px and only show the icon. I'm struggling to figure out how to adjust the width of my div and integrate this funct ...

The onPlayerReady function in the YouTube API seems to be experiencing a delay and

After following a tutorial on integrating the YouTube API into my website, I encountered difficulties trying to play a YouTube video in fullscreen mode when a button is pressed. Despite following the provided code closely, I am unable to get it to work as ...

UCS-2 in Node.JS: Understanding Big-Endian Byte Order

Currently, I am utilizing Node.JS. In my project, I require support for big-endian UCS-2 buffers, which is not natively offered by Node's buffers that only support little-endian format. How can I achieve this specific requirement? ...

Challenges arise when IE distorts featured images in a Wordpress theme

I've set up a Wordpress theme that utilizes featured images as header images on pages to allow clients to easily make modifications themselves. The header image container needs to be a fixed size (100% width of the page and 300px height), so I'm ...

I am trying to display an element upon hovering using Jquery, but unfortunately, despite recognizing the event, it refuses to function as expected

I've been searching for a solution to show a submenu on hover by removing the hidden class that is hiding it. Despite trying various approaches, including using CSS and JavaScript, I haven't been able to make it work. Here is the code snippet I h ...

Display a series of messages using an Angular directive

Here is a sample HTML code: <section class="correspondence"> <header> <div class="from">{{ message.from }}</div> <div class="when">{{ message.when }}</div> </header> <div class="content"> { ...

The element type 'x' in JSX does not offer any construct or call signatures

I have recently imported an image and I am trying to use it within a function. The imported image is as follows: import Edit from 'src/assets/setting/advertising/edit.png'; This is the function in question: function getOptions(row) { ...

Why are my API routes being triggered during the build process of my NextJS project?

My project includes an API route that fetches data from my DataBase. This particular API route is triggered by a CRON job set up in Vercel. After each build of the project, new data gets added to the database. I suspect this might be due to NextJS pre-exe ...

Are there any JS/jQuery plugins available for sliding animations that include slideLeft and slideRight functions, similar to the slideUp and slideDown functions?

Does anyone know of a jQuery/JS plugin that combines fading and sliding effects, specifically with slideLeft and slideRight functions similar to jQuery's slideUp and slideDown? I'm hoping to find something ready-made rather than having to build i ...

Issue with EJS template displaying no information

I am encountering an issue with ejs templates. While I have successfully used it in a previous project, in my current one, it's not working as intended. Instead of rendering the cards with the passed data, all I see is a blank page. Here is my code fo ...

Issues with message display validation in jQuery

Validation has been applied to the form, and there are div elements within the input fields with corresponding IDs. The goal is to display error messages within those divs. Specifically, if an input field is missing, the errorMessage should be set in the ...

Verify if the value of localStorage matches the specified value, then conceal the element

This is my second query and I'm hoping it covers everything. My knowledge of javascript is limited, which has made it difficult for me to get my code working properly. Despite trying various different approaches, I have been unable to resolve the issu ...

JavaScript issue: Shallow copy does not reflect updates in nested JSON object

Within my coding project, I came across a nested JSON object that looks like this: var jsonObj = { "level1" : { "status" : true, "level2" : {} // with the potential to extend further to level 3, 4, and beyond } } My objective is si ...

What is the best way to display a child component inside an iframe using Vue.js?

Looking to provide a live preview of an email before sending it out, I've opted to use an iframe to contain the preview and prevent style leaks. The goal is for the preview to update dynamically as the user fills out form details. How can I display a ...