how do I drive the width of span class with variable

February 9, 2022

Please where am I mistaking?
I am trying to change the progress bar base on variable and it is not working.

    <script>
        function grafWidth(GtempPar) {
         var GtempPar = 30;
          
        document.getElementById('progress-in').style.width = GtempPar + "px";
        }
    </script>

    <div class="progress">
        <a class="majko">Temp_G_back</a>
        <span class="progress-val"><div id="Gtemp"></div>°C</span>
        <span class="progress-bar"><span class="progress-in".style.width =" 80px"></span></span>
    </div>

>Solution :

The most likely reason is that the span is an inline element and as such you can’t specify a width (or margins / padding / height etc). In order to apply the styling try – making the span display y: inline-block and you should be able to apply width changes as expected.

Also the span has an id not a class and you have to call the function with an argument that you are wanting the pass into the function. and the var inside the function is redundant.

function grafWidth(GtempPar) {
   document.getElementById('progress-in').style.width = GtempPar + "px";
}
        
        
grafWidth(150); // this calls the function and passes 150 in to set the width of the progress bar to 150px (out of 200)

span {
  display: inline-block;
}

.progress-bar  {
  border: solid 1px blue;
  width: 200px;
  height: 32px
}

#progress-in {
  background: red;
  position: relative; 
  z-index: 1;
  width: 100px;
  height: 32px;
}

<div class="progress">
    <a class="majko">Temp_G_back</a>
    <span class="progress-val"><div id="Gtemp"></div>°C</span>
    <span class="progress-bar"><span id="progress-in"></span></span>
</div>