Postingan lainnya
Kelas Premium!
Belajar bikin website dari nol sekarang
Gunakan kupon "lebihcepat" untuk diskon 25%!
Kelas Premium!
Belajar Javascript untuk website
Gunakan kupon "mulaijs" untuk diskon 75 ribu!
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>
3 Jawaban:
<div>bisa dicoba seperti ini<br><figure data-trix-attachment="{"contentType":"image/png","filename":"sk_julianakho_progressbar.png","filesize":255990,"height":1072,"url":"https://i.ibb.co/NVtZxQ6/sk-julianakho-progressbar.png","width":3008}" data-trix-content-type="image/png" data-trix-attributes="{"caption":"Random Progress Bar","presentation":"gallery"}" 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="{"contentType":"image/png","filename":"sk_julianakho_progressbar_test.png","filesize":340046,"height":2086,"url":"https://i.ibb.co/BrVbB0L/sk-julianakho-progressbar-test.png","width":1807}" data-trix-content-type="image/png" data-trix-attributes="{"caption":"Random Progress Bar Test","presentation":"gallery"}" 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>
Tanggapan
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.
<div>Sudah saya coba tetapi masih belum bisa, ap ada yang kurang?<br><br></div><pre><!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></pre>
<div>sudah saya coba taruh code javascriptnya di atas </body> tetapi masih belum jalan pak scriptnya mungkin bisa dibantu koreksi ap ada yang kurang?<br><br></div><pre><!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></pre>