JavaScript styles are only visible after the page has been refreshed

Recently, I've developed a script that dynamically calculates and updates the height of a DIV based on the scrollTop value.

var scroll = $(this).scrollTop();
        console.log(scroll);

        function adjustHeight() {
            document.getElementById("overlay").style.height = scroll + 'px';
        }

        document.getElementById("overlay").addEventListener("scroll", adjustHeight());

However, I'm encountering an issue where the style only updates when I refresh the page even though I need it to continuously update (I'm building a progress bar).

Thank you in advance for any assistance provided!
(My apologies if I didn't adhere to the correct question format for this platform, this is my first time posting here :L )

Answer №2

To dynamically update the progress bar, consider adding a listener to the event that triggers the change in value. This will allow you to seamlessly replace or fill the progress bar with its updated value.

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

Struggling to pinpoint the exact element in Python/Selenium

As I work on creating a website manipulation script to automate the process of email mailbox creation on our hosted provider, I find myself navigating new territory in Python and web scripting. If something seems off or subpar in my script, it's beca ...

Verify that a minimum of one checkbox has been ticked according to JavaScript guidelines, with appropriate notifications in case

Need help with displaying a message when no checkbox is checked. Currently implementing JavaScript rules and messages <form method="post" enctype="multipart/form-data name="english_registration_form" id="english_registration_form" > <div cl ...

What is the best way to retrieve the overall error status from the Material UI DataGrid?

I am currently utilizing the Material UI DataGrid element to display information from an EXCEL file. Each Excel document consists of numerous column titles with specific types assigned to them. As an example: const columns = [ { "field&quo ...

JavaScript Inferno" - Similar to the concept of "DLL Hell

I'm working on an ASP.NET webpage that has the following structure: <%@ Page Language="VB" MasterPageFile="~/LGMaster.master" AutoEventWireup="false" Inherits="com.Genie.PresentationLayer.Web.frmPNList" title="Primary Nominals results list - RESTR ...

What is the significance of the "rc" within the version structure of an npm package?

Can someone help me understand what the rc in 2.2.0-rc.0 signifies? I'm curious if it indicates that this version is ready for production use. ...

Utilize MongoDB to store information within a sharding cluster and track the duration of data operations

I am looking to save data on a MonogoDB. For this purpose, I have a setup with one mongos, three configserver, and a sharding configuration consisting of two replicasets (each with primary/secondary/arbiter). There are two main issues I am facing: 1) Wha ...

What could be causing the error "Cannot read the state property of undefined in react-native?"

I really need some assistance. I am attempting to create a JSON object called users in my state properties to test the functionality of my authentication system. However, when I tried to access it, I encountered the error "Cannot read property 'state& ...

Guidance on exporting an Excel file from an HTML table, excluding the final row, using JavaScript

I'm able to export an Excel file from an HTML table, but I'm facing an issue where the last row (tr) meant for pagination on the screen is also being included in the exported result. How can I exclude this row from showing up in the Excel file? ...

When using ngClass and the has-error class on load, the class will still be loaded even if the expression evaluates

When attempting to load the has-error class from Bootstrap using ng-class with a condition on a variable injected to the controller from my factory, I encounter an issue where even though the initial value of the variable is false, the has-error class load ...

Discover all CSS elements with Python Selenium and replace them all

When automating with Python Selenium, I am trying to modify the CSS element style to change the theme color of a page. An example of the page element is shown below: <div style="background: #e7e7e7"> <div style="border-bottom: #e ...

Adjust the transparency of the image when hovered over, but keep the text in the center

How can I change the opacity of an image on hover and simultaneously display text in the center of the image? This is my code: <div class="col-md-4 j-t"> <div class="middle"> <div class="text-middle">Play</div> < ...

I am currently familiarizing myself with backend routes and everything seems to be going smoothly for the first time around. However, upon attempting to revisit the site for

https://i.sstatic.net/ZOBl6.png https://i.sstatic.net/Xzhej.png Whenever I navigate from the home page to the contact page and then back to the home page, it displays an error message saying the site can't be reached. var http = require("http&q ...

The functionality of `this.setState` seems to be malfunctioning within the

There seems to be an issue with this code, as I suspect that `setState` is not functioning correctly. this.setState({ showTooltip: true, toolTipsValue: message, error: true }) Before clicking on a button this.props.loginRes = { responseCode ...

Tips for fixing the "500 (Internal Server Error)" issue in Laravel with ajax

When utilizing AJAX to fetch route data, I encountered an issue. I aim to create a Dynamic Select that, based on the selected "Faculty," displays the corresponding "programs" linked to that faculty. This is my route: Route::get('selectprogramas/{id ...

Initiating preparation during NPM Installation

During the installation of a TypeScript module from Git, I noticed that the package.json file contains a prepare script in its scripts section. Strangely, it seems that the prepare script is not being run when using npm install <git repository#version&g ...

What is the best way to connect data so that when a user clicks on a specific card, it appears on a popup card

When a user clicks on any card containing data retrieved from a backend API GET method, that data should be displayed in a pop-up card. In my situation, I have two components: DisplayNotes.vue and UpdateNotes.vue. Whenever a user clicks on a displayed card ...

implementing nested key property specifications in React

Is it recommended to explicitly set the keys for the children of components when using arrays of Components? I understand that when using arrays of Components the key property is assumed to be the index of the array and should be explicitly set. {arr.ma ...

Maximizing the Potential of SWR with Any Type

I've created a custom hook that wraps around SWR: import useSWR from 'swr'; export enum MethodTypes { POST = 'POST', PUT = 'PUT', GET = 'GET', DELETE = 'DELETE', PATCH = 'PATCH' } ...

showcasing pictures on a .handlebars/html interface

Having some trouble linking images to my .handlebars/html files in the views directory. I've already set up a public folder as per the requirements, but the linked images still aren't showing up when I view my webpage. Below is the node.js code ...

background-color has some unexpected effects

I'm trying to change the background color on my website, but no matter what I do, it stays red. I've deleted all colors, restarted XAMPP, and cleared the browser cache, but nothing is working. I'm completely stuck. And yes, I know the code i ...