Tahun baru, skill baru! 🚀. Masukkan kupon "skill2025" untuk diskon 30% di kelas apa saja

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

Kelas Premium!
Belajar Javascript untuk website

cover kelas Javascript

Gunakan kupon "mulaijs" untuk diskon 75 ribu!

Sum Radio Button Value using Javascript

Permisi gan, ane lagi ngembangin javascript dibawah tapi pas di compile hasilnya ga muncul kenapa ya gan ? ada yang kurang kah ?

<!DOCTYPE html>
<html>
<body>

<h1>Display Radio Buttons</h1>

<form action="/action_page.php">
  <br>
    <label class="radio-inline">
      <input class="r1" type="radio" name="a1" value="10">Option 1
    </label>
    <label class="radio-inline">
      <input class="r1" type="radio" name="a1" value="10">Option 2
    </label>
    <label class="radio-inline">
      <input class="r1" type="radio" name="a1" value="10">Option 3
    </label>
 <br>
 <label class="radio-inline">
      <input class="r1" type="radio" name="a2" value="10">Option 1
    </label>
    <label class="radio-inline">
      <input class="r1" type="radio" name="a2" value="10">Option 2
    </label>
    <label class="radio-inline">
      <input class="r1" type="radio" name="a2" value="10">Option 3
    </label>
 <br>
 <label class="radio-inline">
      <input class="r1" type="radio" name="a3" value="10">Option 1
    </label>
    <label class="radio-inline">
      <input class="r1" type="radio" name="a3" value="10">Option 2
    </label>
    <label class="radio-inline">
      <input class="r1" type="radio" name="a3" value="10">Option 3
    </label>
 <br>
 <button type="button" onclick="displayRadioValue()">
        Submit
    </button>
 <div id="result"></div>
  </form>
</div>

<script>
function displayRadioValue(){
    var score = 0;
 var ele = document.getElementsByName('r1');
 for(i = 0; i < ele.length; i++) {
                if(ele[i].checked)
                document.getElementById("result").innerHTML
                       score+=parseInt(ele[i].value)
 }
 }
</script>

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

6 Kontribusi 1 Poin

Diperbarui 4 tahun yang lalu

2 Jawaban:

Jawaban Terpilih

<div>itu copy code darimana, belum pernah lihat buat jquery ready seperti itu.<br>cobalah baca-baca documentasi jquery-nya dahulu.<br>btw, harusnya buat pertanyaan baru. karena ini sudah beda topik/problem.</div><pre>function calcScore(){ var score = 0; var ele = document.getElementsByClassName("r1"); for(i = 0; i &lt; ele.length; i++) { if(ele[i].checked) { score += parseInt(ele[i].value); } } $("input[name=sum]").val(score); } $(function() { $(".r1").change(function(){ calcScore(); }); });</pre><div><br>------<br>hasil dari getElementsByName adalah 0, karena tidak ada element dengan attribut name r1.</div><pre>function displayRadioValue(){ var score = 0; var ele = document.getElementsByClassName("r1"); for(i = 0; i &lt; ele.length; i++) { if(ele[i].checked) { score += parseInt(ele[i].value); } } document.getElementById("result").innerHTML = score; }</pre>

avatar soeleman
@soeleman

120 Kontribusi 147 Poin

Dipost 4 tahun yang lalu

Tanggapan

bisa gan, terimakasih banyak, tapi kan itu harus di submit baru keluar angkanya. saya coba bikin lagi pas di checked radio buttonnya langsung ke kalkukasi hasilnya tanpa disubmit, tapi masih gagal.

search by google gan, oke maaf ya gan. itu hanya tambahan saja, masalah pertama sudah terpecahkan gan. terimakasih sekali

<div>maaf gan mau tanya lagi, saya coba buat yang langsung dikalkulasi tanpa di submit tapi engga keluar hasilnya, ada yang salah kah di kodingan saya ? mohon bantuannya agan agan.<br><br></div><pre>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;body&gt;

&lt;h1&gt;Display Radio Buttons&lt;/h1&gt;

&lt;form action="/action_page.php"&gt; &lt;br&gt;
&lt;label class="radio-inline"&gt; &lt;input class="r1" type="radio" name="a1" value="10"&gt;Option 1 &lt;/label&gt; &lt;label class="radio-inline"&gt; &lt;input class="r1" type="radio" name="a1" value="4"&gt;Option 2 &lt;/label&gt; &lt;label class="radio-inline"&gt; &lt;input class="r1" type="radio" name="a1" value="10"&gt;Option 3 &lt;/label&gt; &lt;br&gt; &lt;label class="radio-inline"&gt; &lt;input class="r1" type="radio" name="a2" value="9"&gt;Option 1 &lt;/label&gt; &lt;label class="radio-inline"&gt; &lt;input class="r1" type="radio" name="a2" value="18"&gt;Option 2 &lt;/label&gt; &lt;label class="radio-inline"&gt; &lt;input class="r1" type="radio" name="a2" value="10"&gt;Option 3 &lt;/label&gt; &lt;br&gt; &lt;label class="radio-inline"&gt; &lt;input class="r1" type="radio" name="a3" value="10"&gt;Option 1 &lt;/label&gt; &lt;label class="radio-inline"&gt; &lt;input class="r1" type="radio" name="a3" value="6"&gt;Option 2 &lt;/label&gt; &lt;label class="radio-inline"&gt; &lt;input class="r1" type="radio" name="a3" value="8"&gt;Option 3 &lt;/label&gt; &lt;br&gt; &lt;input type="text" name="sum" /&gt; &lt;!--&lt;button type="button" onclick="displayRadioValue()"&gt; Submit &lt;/button&gt;--&gt; &lt;div id="result"&gt;&lt;/div&gt; &lt;/form&gt; &lt;/div&gt; &lt;script&gt; function calcscore(){ var score = 0; var ele = document.getElementsByClassName("r1"); for(i = 0; i &lt; ele.length; i++) { if(ele[i].checked) { score += parseInt(ele[i].value); } } $("input[name=sum]").val(score) } $().ready(function(){ $("r1").change(function(){ calcscore() }); }); &lt;/script&gt;

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

avatar andrydupti
@andrydupti

6 Kontribusi 1 Poin

Dipost 4 tahun yang lalu

Tanggapan

tanggapannya diatas.

Login untuk ikut Jawaban