I have a percentage bar and I need to make it dynamic. So I have a script that calculate the percentage and I need to use the result to update the bar.
<html>
<script>
function myF(){
const and=["1","2","3"];
const myand=["1","2"];
var la=and.length;
var lm=myand.length;
var mywid=0;
for (let i=0; i<la; i++){
for(let j=0; j<lm; j++){
if(and[i]==myand[j])
mywid++;
}
}
}
const perc=(99/la)*mywid;
document.getElementById('output').innerHTML = perc0;
</script>
<body onload="myF()">
<div class="w3-border">
<div class="w3-grey" style="MY VARIABLE PERC"></div>
</div>
But how? I tried with <p id="output>
but it doesn't work Thank you in advantage.There is an accessor for the style attribute on every stylable element. You've already retrieved the output element and updated the inner HTML. Updating other attributes is also the same.
const perc = (99 / la) * mywid;
const element = document.getElementById('output');
element.innerHTML = perc;
element.style.width = `${perc}%`;
const preview = document.getElementById('preview');
const btn0 = document.getElementById('0-btn');
const btn20 = document.getElementById('20-btn');
const btn40 = document.getElementById('40-btn');
const btn60 = document.getElementById('60-btn');
const btn80 = document.getElementById('80-btn');
const btn100 = document.getElementById('100-btn');
btn0.addEventListener('click', () => updatePreview(0));
btn20.addEventListener('click', () => updatePreview(20));
btn40.addEventListener('click', () => updatePreview(40));
btn60.addEventListener('click', () => updatePreview(60));
btn80.addEventListener('click', () => updatePreview(80));
btn100.addEventListener('click', () => updatePreview(100));
function updatePreview(val) {
preview.style.width = `${val}%`;
}.root {
padding: 10px;
}
.preview {
height: 50px;
width: 0;
background-color: red;
border-radius: 5px;
transition-property: width;
transition-duration: 0.3s;
transition-timing-function: ease-in-out;
}
.container {
margin-top: 10px;
padding: 4px;
border-radius: 5px;
border: 2px dashed blue;
}<div class="root">
<div class="controls">
<button id="0-btn">0%</button>
<button id="20-btn">20%</button>
<button id="40-btn">40%</button>
<button id="60-btn">60%</button>
<button id="80-btn">80%</button>
<button id="100-btn">100%</button>
</div>
<div class="container">
<div id="preview" class="preview"></div>
</div>
</div>