javascript - 循环单选按钮，功能不起作用

Question

不知道为什么这个功能无法启动。检查了一下，读了很多关于SO的内容，什么都没有......我确信某个地方有一个非常小的错误，我无法发现..

<form id="order">
    <table>
        <tr>
            <td>
                What type of pica would you like?<br>
                Vegetarian, £6.50 <input type="radio" name="pica" onclick="calcul();" value="vegetarian"><br>
                Meat Lover, £7.20 <input type="radio" name="pica" onclick="calcul();" value="meatLover"><br>
                Hawaian, £5.5 <input type="radio" name="pica" onclick="calcul();" value="hawaian">
                <br><br>
            </td>
        </tr>
    </table>
</form>

var picaPrice = new Array();
    picaPrice['vegetarian']=6.5;
    picaPrice['meatLover']=7.2;
    picaPrice['hawaian']=5.5;

    function calcul(){
        var pprice = 0;
        var selectedPica = document.getElementsByName('pica');
        for(var i=0; i<selectedPica.length; i++){
            if(selectedPica[i].checked) {
                alert('selected');
            }
            else { alert('not selected') }
        }

    }

完成。谢谢您的帮助

Answer 1

document.getElementsByTagName函数返回一个数组，其中包含所有 标签名称 等于给定参数的 DOM 元素(例如 input、div 等)。如果您想通过 name 属性 选择元素，您应该使用 document.getElementsByName相反。

var selectedPica = document.getElementsByName('pica');

<小时/>

document.getElementsByName

Returns a list of elements with a given name in the (X)HTML document.

document.getElementsByTagName

Returns a HTMLCollection of elements with the given tag name. Thecomplete document is searched, including the root node. The returnedHTMLCollection is live, meaning that it updates itself automaticallyto stay in sync with the DOM tree without having to calldocument.getElementsByTagName again.