<!DOCTYPE html>
<html>

<head>
     <meta charset="utf-8">
     <title>Demo JavaScript getElementsByName</title>
</head>

<body>
     <p>Silakan menilai layanan ini:</p>
     <p>
         <label for="sangat-buruk">
             <input type="radio" name="nilai" value="Sangat buruk" id="sangat buruk">Sangat buruk
         </label>
         <label for = "buruk">
             <input type="radio" name="nilai" value="Buruk" id="buruk">Buruk
         </label>
         <label for = "oke">
             <input type="radio" name="nilai" value="Oke" id="oke">Oke
         </label>
         <label for = "baik">
             <input type="radio" name="nilai" value="Baik">Baik
         </label>
         <label for ="sangat-baik">
             <input type="radio" name="nilai" value="Sangat Baik" id="Sangat baik">Sangat Baik
         </label>
     </p>
     <p>
         <button id="tmblNilai">Kirim</button>
     </p>
     <p id="hasil"></p>
     <script>
         let btn = document.getElementById('tmblNilai');
         let output = document.getElementById('hasil');

         btn.addEventListener('click', () => {
             let penilaian = document.getElementsByName('nilai');
             penilaian.forEach((nilai) => {
                 if (nilai.checked) {
                     output.innerText = `Anda memilih: ${nilai.value}`;
                 }
             });

         });
     </script>
</body>

</html>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.