HTML-ben JS változó átadása

HTML-ben JS változó átadása
2021-01-19T18:56:46+01:00
2021-01-20T17:56:15+01:00
2022-08-12T00:32:30+02:00
kalmarr
Sziasztok,

a következő a problémám:

JS-ben szeretnék átadni egy változó értéket html kódba, ami egy progresszbárt rajzolna ki.

pl:

<div class="progressBar__current" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
aria-valuenow="100" értéket szeretném megadni JS változóval.

<script> let ertek = 44; <div class="progressBar__current" role="progressbar" aria-valuenow= ertek aria-valuemin="0" aria-valuemax="100"></div> </script>

Kérdésem, hogy ezt hogy is lehet megcsinálni? Egyszerűen nem jövök rá :(

Köszi!

Kalmi
Mutasd a teljes hozzászólást!
Hali!

Kérdésem, hogy ezt hogy is lehet megcsinálni?

Például úgy, hogy az elemet alapértékkel hozod létre, majd JS-ben megváltoztatod az értékét:
<div id="progressBar" class="progressBar__current" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div> … <script> let ertek = 44; let progressBar = document.querySelector('#progressBar'); progressBar.setAttribute('aria-valuenow', ertek); </script>
De eljárhatsz úgy is, hogy dinamikusan hozod létre a div-et (createElement()), beállítod az attribútumait (setAttribute()), majd beilleszted a megfelelő helyre (appendChild()).

Mutasd a teljes hozzászólást!

  • <script> let be = Date.now(),fps=0; requestAnimationFrame( function loop(){ let now = Date.now() fps = Math.round(1000 / (now - be)) be = now requestAnimationFrame(loop) if (fps < 35){ kFps.style.color = "red" kFps.textContent = fps } if (fps >= 35 && fps <= 41) { kFps.style.color = "deepskyblue" kFps.textContent = fps + " FPS" } else { kFps.style.color = "black" kFps.textContent = fps + " FPS" } kpFps.value = fps } ) </script> <span id="kFps"></span> <progress id="kpFps" value="0" min="0" max="100" style="vertical-align:middle"></progress>
    Mutasd a teljes hozzászólást!
  • Ez is egy szép megoldás. Köszönöm, hogy mutattál rá egy példát, de ezzel a grafikába is bele kellene nyúlni. Így az elsőt választottam! :)
    Mutasd a teljes hozzászólást!
Tetszett amit olvastál? Szeretnél a jövőben is értesülni a hasonló érdekességekről?
abcd