Passing Javascript value into CSS?

user_19284542 0
Viewed 63

I'm trying to pass my javascript value (a percentage) into the css 100% width line which is currently at 30%. This currently creates a table that populates outward, starting at 0 and then going out to 30%, I want to be able to implement my Javascript value (c2_percent) instead of the 30% value. If anyone can help that would be great. Thanks

                <div class="bar-graph bar-graph-horizontal bar-graph-one">
                  <div class="bar-one">
                    <span class="rating-a1">A1</span>
                    <div class="bar" id="rating-a1" data-percentage=""></div>
                  </div>
                  <div class="bar-two">
                    <span class="rating-a2">A2</span>
                    <div class="bar" data-percentage="11%"></div>
                  </div>
                  <div class="bar-three">
                    <span class="rating-a3">A3</span>
                    <div class="bar" data-percentage="7%"></div>
                  </div>
                  <div class="bar-four">
                    <span class="rating-b1">B1</span>
                    <div class="bar" data-percentage="10%"></div>
                  </div>
                  <div class="bar-five">
                    <span class="rating-b2">B2</span>
                    <div class="bar" data-percentage="20%"></div>
                  </div>
                  <div class="bar-six">
                    <span class="rating-b3">B3</span>
                    <div class="bar" data-percentage="5%"></div>
                  </div>
                  <div class="bar-seven">
                    <span class="rating-c1">C1</span>
                    <div class="bar" data-percentage="9%"></div>
                  </div>
                  <div class="bar-eight">
                    <span class="rating-c2">C2</span>
                    <div class="bar" id="c2-rating" data-percentage=""></div>
                  </div>
                  <div class="bar-nine">
                    <span class="rating-c3">C3</span>
                    <div class="bar" data-percentage="5%"></div>
                  </div>
                  <div class="bar-ten">
                    <span class="rating-d1">D1</span>
                    <div class="bar" data-percentage="5%"></div>
                  </div>
                </div>



              @-webkit-keyframes show-bar-eight {
                     0% {
                            width: 0;
                        }
                   100% {
                            width: 30%;
                        }
                      }





                    <script>

                        for(let i = 0; i < 1; i++) {

                          const c2_security_values = Array.from(document.querySelectorAll('.security-value-c2'));
                          const c2_security_values_inner = c2_security_values.map((element) => element.innerText);
                          const c2_summed_values = c2_security_values_inner.reduce((accumulator, currentValue) => parseInt(accumulator) + parseInt(currentValue));


                          const total_security_values = Array.from(document.querySelectorAll('.individual-market-value'));
                          const total_security_values_inner = total_security_values.map((element) => element.innerText);
                          const total_summed_values = total_security_values_inner.reduce((accumulator, currentValue) => parseInt(accumulator) + parseInt(currentValue));



                          const c2_percent = c2_summed_values / total_summed_values


                        }
                    </script>
css django html javascript
1 Answers

Out of the top of my head, I would add this line after calculating c2_percent in the script (make sure to have your c2_percent defined outside of the loop, and set it as a variable, not a constant).

    document.getElementById('c2-rating').setAttribute("data-percentage", c2_percent * 100 + '%');

As you don't provide any other data about the rest of the page, the styles, etc. I cannot tell if this would even work.

Do you pretend to modify the width of the c2-rating?

This only modifies the value of the data-percentage attribute.

To modify the css width attribute, you can try

    document.getElementById('c2-rating').setAttribute("style","width:" + (c2_percent * 100) + '%');

I have made a snippet that shows that it would work, it all will depend on the rest of the page in your project.

<html>

<head>
    <style>
        .bar-graph {
            font-family: Arial, Helvetica, sans-serif;
        }

        .bar-graph div {
            padding: 5px 0px;
        }

        .bar-graph div span {
            display: inline-block;
            font-weight: 600;
            margin: 5px 5px;
            float: left;
        }

        .bar-graph .bar {
            border: 1px solid #ccc;
            background-color: #eee;
            height: 30px;
        }

        @-webkit-keyframes show-bar-eight {
            0% {
                width: 0;
            }

            100% {
                width: 30%;
            }
        }

    </style>
</head>

<body>
    <div class="bar-graph bar-graph-horizontal bar-graph-one">
        <div class="bar-one">
            <span class="rating-a1">A1</span>
            <div class="bar" id="rating-a1" data-percentage=""></div>
        </div>
        <div class="bar-two">
            <span class="rating-a2">A2</span>
            <div class="bar" data-percentage="11%"></div>
        </div>
        <div class="bar-three">
            <span class="rating-a3">A3</span>
            <div class="bar" data-percentage="7%"></div>
        </div>
        <div class="bar-four">
            <span class="rating-b1">B1</span>
            <div class="bar" data-percentage="10%"></div>
        </div>
        <div class="bar-five">
            <span class="rating-b2">B2</span>
            <div class="bar" data-percentage="20%"></div>
        </div>
        <div class="bar-six">
            <span class="rating-b3">B3</span>
            <div class="bar" data-percentage="5%"></div>
        </div>
        <div class="bar-seven">
            <span class="rating-c1">C1</span>
            <div class="bar" data-percentage="9%"></div>
        </div>
        <div class="bar-eight">
            <span class="rating-c2">C2</span>
            <div class="bar" id="c2-rating" data-percentage=""></div>
        </div>
        <div class="bar-nine">
            <span class="rating-c3">C3</span>
            <div class="bar" data-percentage="5%"></div>
        </div>
        <div class="bar-ten">
            <span class="rating-d1">D1</span>
            <div class="bar" data-percentage="5%"></div>
        </div>
    </div>

    <input type="range" min="0" max="100" value="0" class="slider" id="c2RatingSlider" value="43" onchange="updateC2()">

    <script>
        updateC2();

        function updateC2() {
            var c2_percent = document.getElementById("c2RatingSlider").value / 100;
            document.getElementById('c2-rating').setAttribute("data-percentage", c2_percent * 100 + '%');

            document.querySelectorAll('.bar').forEach((bar) => {
                const percentage = bar.getAttribute('data-percentage');
                bar.setAttribute("style", "width:" + percentage);
            });
        }
    </script>
</body>

</html>

user_119890030
Related