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

时间:2014-03-23 14:11:53

标签: javascript html

最后的按钮,“战斗”,无法按预期工作。我计划有更多变量,战斗按钮会提醒胜利者。目前,如果一个是水,另一个是火;水赢了。

但目前它始终提醒其他“rofl所以noob既不会赢”

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);
};

请帮忙解决这个问题。我已经尝试寻找答案并尝试了许多不同的变体等。我似乎无法修复它。请帮助:3

jsfiddle link

2 个答案:

答案 0 :(得分:1)

因为getElementsByName返回一个HTMLCollection。所以你必须使用:

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

答案 1 :(得分:0)

因为getElementsByName返回HTMLCollection的类似数组的对象以及何时 比较删除字符串只给数字。所以你必须使用:

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