How do I get the clicked button name with getElemetByName?

Question

I'm trying to get value of button which is clicked, or determine which button was clicked.

From code below, I'm getting all values but I just want the button that was clicked.

 <script type="text/javascript">
    function GetCheckedFruits () {
        var elements = document.getElementsByName ("fruit");
        for (var i=0; i < elements.length; i++) {
            if (elements[i].click) {
                alert ("The " + (i+1) + ". button is click");
            }
        }
    }
</script>

HTML:

<input id="Text1" name="fruit" type="button" value="apple" onclick="GetCheckedFruits ()" /><br />

<input id="Text1" name="fruit" type="button" value="banana" onclick="GetCheckedFruits ()" /><br />

<input id="Text1" name="fruit" type="button" value="blackberry" onclick="GetCheckedFruits ()" /><br />

Where am I going wrong?

Answer 1

change

if (elements[i].click) {
     alert ("The " + (i+1) + ". button is click");
}

to

if (elements[i].type == 'button') {
    alert ("The " + elements[i].value + " button is click");
}

thats it.

EDIT

Try this

function GetCheckedFruits (clickedButton) { alert ("The " + clickedButton.value + ". button is click"); } }

and add the buttons like this

<input type="button" value="Button1" onclick="{GetCheckedFruits(this);}" /> <input type="button" value="Button2" onclick="{GetCheckedFruits(this);}" /> <input type="button" value="Button3" onclick="{GetCheckedFruits(this);}" />

Answer 2

If you want to alert the message when the button is clicked, you would have to use an event like this:

<script type="text/javascript">
    function GetCheckedFruits () {
        var elements = document.getElementsByName ("fruit");
        for (var i=0; i < elements.length; i++) {
            elements[i].onclick = function() {
                // You can put anything you want here
                // the variable `this` is the clicked button
                alert ("The " + this.value + " button is click");
            }
        }
    }
</script>

---

EDIT:

In the case you are working with checkboxes and are trying to get which fruits where selected, this will work:

<script type="text/javascript">
    function GetCheckedFruits () {
        var elements = document.getElementsByName ("fruit");
        for (var i=0; i < elements.length; i++) {
            if (elements[i].checked == 1) {
                alert ("The " + elements[i].value + " button is click");
            }
        }
    }
</script>