0

不知道为什么这个功能不会启动。检查了它，阅读了很多关于 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') }
        }

    }

完毕。谢谢您的帮助

4

5 回答 5

1

该document.getElementsByTagName函数返回一个由所有 DOM 元素组成的数组，这些元素的标签名称等于给定参数（例如input、div等）。如果你想通过他们选择元素name attribute，你应该使用document.getElementsByName。

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

document.getElementsByName

返回(X)HTML 文档中具有给定名称的元素列表。

document.getElementsByTagName

返回具有给定标签名称的元素的 HTMLCollection 。搜索完整的文档，包括根节点。返回的 HTMLCollection 是实时的，这意味着它会自动更新自身以与 DOM 树保持同步，而无需再次调用 document.getElementsByTagName。

于 2013-09-22T09:45:30.343 回答
1

您的脚本几乎没问题，只需使用 getElementsByName 代替 ...ByTagName 如前所述。 

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');
    var res = document.getElementById('result').value;
    for(var i=0; i<selectedPica.length; i++){
        if(selectedPica[i].checked) {
            alert('selected');
        }
        else { alert('not selected') }
    }

}

此外，您的脚本引用了一个结果项。您的 html 标记不提供此功能，只需添加一个 id="result" 的 div ... 

<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>
                <td><div id="result"></div>
    </tr>
</table>

于 2013-09-22T09:53:28.093 回答
0 
<form id="order" name="orderForm">
 var selectedPica = document.getElementsByTagName('pica');

替换为：

var selectedPica = document.forms['orderForm'].elements['pica'];

见演示

于 2013-09-22T09:50:09.707 回答
0 
var selectedPica = document.getElementsByTagName('pica');

getElementsByTagName的工作方式并非如此。

例子：

 <script>
    function getElements()
      {
      var x=document.getElementsByTagName("input");
      alert(x.length);
      }
    </script>

    <input type="text" size="20"><br>
    <input type="text" size="20"><br>
    <input type="text" size="20"><br><br>
    <input type="button" onclick="getElements()" value="How many input elements?">

你在看的是getElementsByName

function getElements()
{
var x=document.getElementsByName("x");
alert(x.length);
}
</script>
Cats:
<input name="x" type="radio" value="Cats">
Dogs:
<input name="x" type="radio" value="Dogs">

<input type="button" onclick="getElements()" value="How many elements named 'x'?">
于 2013-09-22T09:45:57.297 回答
0

更改行 var var selectedPica = document.getElementsByTagName('pica'); 到 selectedPica = document.getElementsByName('pica');

于 2013-09-22T09:47:22.493 回答