hi teams, i trying to sum value from selected radio button, but it not working, can you help me out ? any help is appreciated

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

Recommended Answers

It looks as if you're having difficulty with selecting elements.

On line 49 of your code, you are getting elements with the name r1, but there are no elements with that name. There are elements that have that class, but not that name.

Jump to Post

All 2 Replies

It looks as if you're having difficulty with selecting elements.

On line 49 of your code, you are getting elements with the name r1, but there are no elements with that name. There are elements that have that class, but not that name.

First off, document.getElementsByName('r1') will return null result because there is no radio button with such name.
Secondly, you didn't terminate most of the lines with semi colon (;).

So the following should work 99% if not perfectly. Lol!

   <script>

function displayRadioValue()
{
        var score = 0;
    var ele = document.getElementsByClassName('r1');
var result = document.getElementById("result");
    for(i = 0; i < ele.length; i++) 
{ 
                if(ele[i].checked)             score+=parseInt(ele[i].value)
    }
    result.innerHTML = score;
       }
</script>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of 1.21 million developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.