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

@julianakho

3 Kontribusi 0 Poin

Dipost: 4 bulan yang lalu Update 4 bulan yang lalu

atau respon:

Jawaban

bisa dicoba seperti ini

Random Progress Bar

Random Progress Bar Test

@soeleman

120 Kontribusi 146 Poin

Dipost: 4 bulan yang lalu Update 4 bulan yang lalu

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

Sudah saya coba tetapi masih belum bisa, ap ada yang kurang?

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

document.querySelectorAll('[role="progressbar"]').forEach(el => {
	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}' ;
});  
</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" 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" 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" 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" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:30%">
      40%
    </div>
  </div>
</div>



</body>
</html>

@julianakho

3 Kontribusi 0 Poin

Dipost: 4 bulan yang lalu

sudah saya coba taruh code javascriptnya di atas </body> tetapi masih belum jalan pak scriptnya mungkin bisa dibantu koreksi ap ada yang kurang?

<!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" 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" 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" 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" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:30%">
      40%
    </div>
  </div>
</div>

<script>
document.querySelectorAll('[role="progressbar"]').forEach(el => {
	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}';
});  
</script>

</body>
</html>

@julianakho

3 Kontribusi 0 Poin

Dipost: 4 bulan yang lalu

Buku ini akan jadi teman perjalanan kamu ngoding! Sudah tersedia versi PDF.

@ahanafi
813 Kontribusi 551 Poin
@Nandar
648 Kontribusi 204 Poin
@dianarifr
642 Kontribusi 316 Poin
@Saputroandhi
509 Kontribusi 162 Poin
@dodipsitorus
412 Kontribusi 145 Poin

Membuat Beberapa Random Progress Bar

Jawaban

Pertanyaan Lainnya

Buku Halo Koding!

Top Kontributor