Tengo una barra de porcentaje y necesito hacerla dinámica. Así que tengo un script que calcula el porcentaje y necesito usar el resultado para actualizar la barra.
<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>¿Pero cómo? Probé con <p id="salida>
pero no funciona Gracias de antemano.Hay un descriptor de acceso para el atributo de estilo en cada elemento con estilo. Ya recuperó el elemento de salida y actualizó el HTML interno. Actualizar otros atributos también es lo mismo.
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>