Passing Javascript value into CSS?

Question

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>

Answer 1

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>