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>
avatar andrydupti
@andrydupti

6 Kontribusi 1 Poin

Diperbarui 3 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 3 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 3 tahun yang lalu

Tanggapan

tanggapannya diatas.

Login untuk ikut Jawaban