Placing a point on a measurement scale according to a changing factor

Question

Placing a point on a measurement scale according to a changing factor

I am completely new to html, css, and javascript. My goal is to create a color gradient bar and then place a dot on it based on a variable. I tried to implement a solution I found from various sources, but it is not functioning as expected, and I am seeking help to understand the issue.

var A = 38,
  B = 100,
  C = 0,
  D = 300,
  score = 67; // {{crFlag['value']}} will be variable

function init() {
  $('.circle').attr('style', 'left: ' + ((score - A) / (B - A) * (D - C)) + 'px');
};

.container {
  position: relative;
  display: flex;
  width: 300px;
  height: 16px;
  border: 1px solid #7c7676;
  background-image: linear-gradient(to right, #4cd964, #d0ff00, #e0740f, #ff2d55);
}

.circle {
  background: rgba(88, 83, 83);
  width: 10px;
  height: 16px;
  border-radius: 30%;
  position: absolute;
  left: 40px;
}

<div class="container">
  <div class="circle"></div>
</div>

Why is the position of the dot not changing when I update the score variable?

javascript html css

Answer 1

Answer №1

Just a couple of points to consider:

1) If you've been invoking your init function prematurely, it might be because you're calling it before the DOM has finished loading, and therefore before the div with the class "circle" exists. I've included a new script block at the end to ensure it gets called at the right time.

2) It's unclear whether you're utilizing jQuery in your code, but the syntax you're using is jQuery-specific. The snippet provided will function without jQuery, but feel free to uncomment the line I've left commented out if, and only if, you've already loaded jQuery.

<html>
    <head>
        <style>
            .container {
            position: relative;
            display: flex;
            width: 300px;
            height: 16px;
            border: 1px solid #7c7676;
            background-image: linear-gradient(to right, #4cd964, #d0ff00, #e0740f, #ff2d55);
            }

            .circle {
            background: rgba(88, 83, 83);
            width: 10px;
            height: 16px;
            border-radius: 30%;
            position: absolute;
            left: 40px;
            }

        </style>

        <script>
            var A = 38,
            B = 100,
            C = 0, 
            D = 300,
            score = 67; // {{crFlag['value']}} will be variable

            function init(){
                    document.querySelector(".circle").setAttribute("style", 'left: ' + ((score-A)/(B-A)*(D-C)) + 'px' )
                // $('.circle').attr('style', 'left: ' + ((score-A)/(B-A)*(D-C)) + 'px' );
            };
        </script>

    </head>

    <body>
        <div class="container">
            <div class="circle"></div>
        </div>
    </body>
    <script>
    init();
    </script>
</html>

Answer 2

Just a couple of points to consider:

1) If you've been invoking your init function prematurely, it might be because you're calling it before the DOM has finished loading, and therefore before the div with the class "circle" exists. I've included a new script block at the end to ensure it gets called at the right time.

2) It's unclear whether you're utilizing jQuery in your code, but the syntax you're using is jQuery-specific. The snippet provided will function without jQuery, but feel free to uncomment the line I've left commented out if, and only if, you've already loaded jQuery.

<html>
    <head>
        <style>
            .container {
            position: relative;
            display: flex;
            width: 300px;
            height: 16px;
            border: 1px solid #7c7676;
            background-image: linear-gradient(to right, #4cd964, #d0ff00, #e0740f, #ff2d55);
            }

            .circle {
            background: rgba(88, 83, 83);
            width: 10px;
            height: 16px;
            border-radius: 30%;
            position: absolute;
            left: 40px;
            }

        </style>

        <script>
            var A = 38,
            B = 100,
            C = 0, 
            D = 300,
            score = 67; // {{crFlag['value']}} will be variable

            function init(){
                    document.querySelector(".circle").setAttribute("style", 'left: ' + ((score-A)/(B-A)*(D-C)) + 'px' )
                // $('.circle').attr('style', 'left: ' + ((score-A)/(B-A)*(D-C)) + 'px' );
            };
        </script>

    </head>

    <body>
        <div class="container">
            <div class="circle"></div>
        </div>
    </body>
    <script>
    init();
    </script>
</html>

Placing a point on a measurement scale according to a changing factor

Answer №1

Similar questions

Guide on displaying a tooltip for an object in an Angular component using Bootstrap syntax

Instead of stacking neatly, the Bootstrap rows are overlapping each other

Tips for acquiring the newest router in an angular environment

Update Refresh Token within Interceptor prior to sending request

How to horizontally center a div between two floated elements

Gliding along a div and concealing it out of view, making it seem like it has disappeared

Uploading files to a server using Node.js without the need for additional frameworks

Changing the arrow in jQuery's slideToggle for different div elements is a breeze

Div element to animate and vanish in a flash

Limiting the number of times a specific character appears using a regular expression

What is the best way to transfer variables in my specific scenario?

I am working on a NodeJs code that utilizes (Array)Buffers and native readUInt16BE. However, since I am working within a browser context, I plan to opt for DataView.getUint16 instead

Defining the style class for a nested Angular 2 component

The unit tests are not triggering the execution of setTimeout

Please refrain from refreshing the page multiple times in order to receive updated data from the database

Understanding the user's preference for text alignment and managing how the text is displayed in a text area (or text field) within a ReactJS application

Angular encountered an issue with an HTTP POST request, as the 'Access-Control-Allow-Origin' header was not found on the requested resource

Using jQuery to retrieve the TD value

Ways to conceal a div using ng-hide

Can a javascript variable be accessed after loading an iframe and returning to the page?