skodev mascot typing keyboard

SKO.DEV

sekolah koding rasa baru
icon gambar buku BELAJAR icon gambar pohon KOMUNITAS icon gambar buku ARTIKEL icon gambar masuk MASUK

Postingan lainnya

Kelas Premium!
Belajar bikin website dari nol sekarang

cover kelas HTML dan CSS

Gunakan kupon "lebihcepat" untuk diskon 25%!

Membuat Beberapa Random Progress Bar

Halo, saya ingin mencoba membuat beberapa random progress bar (lebih dari 3) dengan html dan javascript, ,saya sudah mencoba tetapi hanya bar pertama  saja yang berubah, moohon solusinya, terima kasih banyak

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Animated Progress Bar</h2>
  <p>The .active class animates the progress bar:</p>
  <div class="progress">
    <div class="progress-bar progress-bar-striped active"  id="demo" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:30%">
      40%
    </div>
  </div>
  <div class="progress">
    <div class="progress-bar progress-bar-striped active"  id="demo" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:30%">
      40%
    </div>
  </div>
  <div class="progress">
    <div class="progress-bar progress-bar-striped active"  id="demo" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:30%">
      40%
    </div>
  </div>
  <div class="progress">
    <div class="progress-bar progress-bar-striped active"  id="demo" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:30%">
      40%
    </div>
  </div>
</div>

<script>
var x =Math.floor(Math.random() * 100) + 1;
document.getElementById("demo").innerHTML = x;
document.getElementById("demo").setAttribute("style", "width:"+x+"%");
</script>

</body>
</html>
html javascript
avatar julianakho
@julianakho

3 Kontribusi 0 Poin

Diperbarui 1 tahun yang lalu

3 Jawaban:

<div>bisa dicoba seperti ini<br><figure data-trix-attachment="{&quot;contentType&quot;:&quot;image/png&quot;,&quot;filename&quot;:&quot;sk_julianakho_progressbar.png&quot;,&quot;filesize&quot;:255990,&quot;height&quot;:1072,&quot;url&quot;:&quot;https://i.ibb.co/NVtZxQ6/sk-julianakho-progressbar.png&quot;,&quot;width&quot;:3008}" data-trix-content-type="image/png" data-trix-attributes="{&quot;caption&quot;:&quot;Random Progress Bar&quot;,&quot;presentation&quot;:&quot;gallery&quot;}" class="attachment attachment--preview attachment--png"><img src="https://i.ibb.co/NVtZxQ6/sk-julianakho-progressbar.png" width="3008" height="1072"><figcaption class="attachment__caption attachment__caption--edited">Random Progress Bar</figcaption></figure><br><figure data-trix-attachment="{&quot;contentType&quot;:&quot;image/png&quot;,&quot;filename&quot;:&quot;sk_julianakho_progressbar_test.png&quot;,&quot;filesize&quot;:340046,&quot;height&quot;:2086,&quot;url&quot;:&quot;https://i.ibb.co/BrVbB0L/sk-julianakho-progressbar-test.png&quot;,&quot;width&quot;:1807}" data-trix-content-type="image/png" data-trix-attributes="{&quot;caption&quot;:&quot;Random Progress Bar Test&quot;,&quot;presentation&quot;:&quot;gallery&quot;}" class="attachment attachment--preview attachment--png"><img src="https://i.ibb.co/BrVbB0L/sk-julianakho-progressbar-test.png" width="1807" height="2086"><figcaption class="attachment__caption attachment__caption--edited">Random Progress Bar Test</figcaption></figure></div>

avatar soeleman
@soeleman

120 Kontribusi 147 Poin

Dipost 1 tahun yang lalu

Tanggapan

Kalau lihat code anda dibawah, urutan javascript-nya harusnya seperti di-code atas -- diatas . Untuk code dibawah, elemant-nya belum ada ketika script itu dijalankan oleh browser.

<div>Sudah saya coba tetapi masih belum bisa, ap ada yang kurang?<br><br></div><pre>&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;title&gt;Bootstrap Example&lt;/title&gt; &lt;meta charset="utf-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt; &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"&gt; &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"&gt;&lt;/script&gt; &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"&gt;&lt;/script&gt; &lt;script&gt;

document.querySelectorAll('[role="progressbar"]').forEach(el =&gt; { const n = Math.floor(Math.random() * 100) + 1; el.setAttribute("style", 'width:${n}%;'); el.setAttribute("aria-valuenow", '${n}'); el.setAttribute("title", '${n}%'); el.innerHTML = '${n}' ; });
&lt;/script&gt; &lt;/head&gt; &lt;body&gt;

&lt;div class="container"&gt; &lt;h2&gt;Animated Progress Bar&lt;/h2&gt; &lt;p&gt;The .active class animates the progress bar:&lt;/p&gt; &lt;div class="progress"&gt; &lt;div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:30%"&gt; 40% &lt;/div&gt; &lt;/div&gt; &lt;div class="progress"&gt; &lt;div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:30%"&gt; 40% &lt;/div&gt; &lt;/div&gt; &lt;div class="progress"&gt; &lt;div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:30%"&gt; 40% &lt;/div&gt; &lt;/div&gt; &lt;div class="progress"&gt; &lt;div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:30%"&gt; 40% &lt;/div&gt; &lt;/div&gt; &lt;/div&gt;

&lt;/body&gt; &lt;/html&gt;</pre>

avatar julianakho
@julianakho

3 Kontribusi 0 Poin

Dipost 1 tahun yang lalu

<div>sudah saya coba taruh code javascriptnya di atas &lt;/body&gt; tetapi masih belum jalan pak scriptnya mungkin bisa dibantu koreksi ap ada yang kurang?<br><br></div><pre>&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;title&gt;Bootstrap Example&lt;/title&gt; &lt;meta charset="utf-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt; &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"&gt; &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"&gt;&lt;/script&gt; &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"&gt;&lt;/script&gt;

&lt;/head&gt; &lt;body&gt;

&lt;div class="container"&gt; &lt;h2&gt;Animated Progress Bar&lt;/h2&gt; &lt;p&gt;The .active class animates the progress bar:&lt;/p&gt; &lt;div class="progress"&gt; &lt;div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:30%"&gt; 40% &lt;/div&gt; &lt;/div&gt; &lt;div class="progress"&gt; &lt;div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:30%"&gt; 40% &lt;/div&gt; &lt;/div&gt; &lt;div class="progress"&gt; &lt;div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:30%"&gt; 40% &lt;/div&gt; &lt;/div&gt; &lt;div class="progress"&gt; &lt;div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:30%"&gt; 40% &lt;/div&gt; &lt;/div&gt; &lt;/div&gt;

&lt;script&gt; document.querySelectorAll('[role="progressbar"]').forEach(el =&gt; { const n = Math.floor(Math.random() * 100) + 1; el.setAttribute("style", 'width:${n}%;'); el.setAttribute("aria-valuenow", '${n}'); el.setAttribute("title", '${n}%'); el.innerHTML = '${n}'; });
&lt;/script&gt;

&lt;/body&gt; &lt;/html&gt;</pre>

avatar julianakho
@julianakho

3 Kontribusi 0 Poin

Dipost 1 tahun yang lalu

Login untuk ikut Jawaban