为什么我的按钮onclick功能无法正常工作？

Question

The button at the end, "fight" , doesn't work as intended. I plan to have more variables and the fight button will alert with the winner. Currently, if one is water and the other is fire; the water wins.

But currently it always alerts the else , "rofl so noob neither wins" .

HTML:

Pokem8's Element:
<input type="radio" name="element" value="1"> Water
<input type="radio" name="element" value="2"> Fire

Other guy's Element:
<input type="radio" name="other" value="1"> Water
<input type="radio" name="other" value="2"> Fire

<button id="fight">FIGHT</button>

Javascript:

var ele = document.getElementsByName('element');

var others = document.getElementsByName('other');


var compare = function(choice1, choice2) {
    if (choice1 == "1") {
        if (choice2 == "2") {
            alert ("Pokem8 wins");
        }
    }
    else if (choice2 == "1") {
        if (choice1 == "2") {
            alert ("Other guy wins");
        }
    }
    else {
        alert ("rofl so noob neither wins");
    }
}


document.getElementById('fight').onclick = function() {
    compare(ele, others);
};

Please help solve this problem. I've tried searching for an answer and tried many different variations and such. I can't seem to fix it. Pls help :3

jsfiddle link

Answer 1

Its because getElementsByName returns an HTMLCollection. So you have to use :

var ele = document.getElementsByName('element')[0].value;

var others = document.getElementsByName('other')[0].value;


var compare = function (choice1, choice2) {
    if (choice1 == 1) {
        if (choice2 == 2) {
            alert("Pokem8 wins");
        }
    } else if (choice2 == 1) {
        if (choice1 == 2) {
            alert("Other guy wins");
        }
    } else {
        alert("rofl so noob neither wins");
    }
};


document.getElementById('fight').onclick = function () {
    compare(ele, others);
};

DEMO

Answer 2

Its because getElementsByName returns array-like object of an HTMLCollection and when comparing removing string just give number. So you have to use:

var ele = document.getElementsByName('element')[0].value;