Passing Javascript value into CSS?-CodePudding

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 >
                  <div >
                    <span >A1</span>
                    <div  id="rating-a1" data-percentage=""></div>
                  </div>
                  <div >
                    <span >A2</span>
                    <div  data-percentage="11%"></div>
                  </div>
                  <div >
                    <span >A3</span>
                    <div  data-percentage="7%"></div>
                  </div>
                  <div >
                    <span >B1</span>
                    <div  data-percentage="10%"></div>
                  </div>
                  <div >
                    <span >B2</span>
                    <div  data-percentage="20%"></div>
                  </div>
                  <div >
                    <span >B3</span>
                    <div  data-percentage="5%"></div>
                  </div>
                  <div >
                    <span >C1</span>
                    <div  data-percentage="9%"></div>
                  </div>
                  <div >
                    <span >C2</span>
                    <div  id="c2-rating" data-percentage=""></div>
                  </div>
                  <div >
                    <span >C3</span>
                    <div  data-percentage="5%"></div>
                  </div>
                  <div >
                    <span >D1</span>
                    <div  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>

CodePudding user response：

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 >
        <div >
            <span >A1</span>
            <div  id="rating-a1" data-percentage=""></div>
        </div>
        <div >
            <span >A2</span>
            <div  data-percentage="11%"></div>
        </div>
        <div >
            <span >A3</span>
            <div  data-percentage="7%"></div>
        </div>
        <div >
            <span >B1</span>
            <div  data-percentage="10%"></div>
        </div>
        <div >
            <span >B2</span>
            <div  data-percentage="20%"></div>
        </div>
        <div >
            <span >B3</span>
            <div  data-percentage="5%"></div>
        </div>
        <div >
            <span >C1</span>
            <div  data-percentage="9%"></div>
        </div>
        <div >
            <span >C2</span>
            <div  id="c2-rating" data-percentage=""></div>
        </div>
        <div >
            <span >C3</span>
            <div  data-percentage="5%"></div>
        </div>
        <div >
            <span >D1</span>
            <div  data-percentage="5%"></div>
        </div>
    </div>

    <input type="range" min="0" max="100" value="0"  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>