Member Avatar for duptiagnas

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>
  • 3 Contributors
  • 2 Replies
  • 725 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by Emmason
Member Avatar for Dani

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.

Member Avatar for Emmason

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 developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.