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>
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>