0

ユーザーが [プランの詳細] と [プランの期間] の 2 つのカテゴリでラジオ ボタンを選択すると、JavaScript を介して入力フィールドに関連データが入力されます。

以下の html マークアップと JavaScript を確認し、修正または機能する代替方法を提案してください。

<h3 class="fltClear">Plan Details</h3>
<div id="spryradio1">
<dt>Plan Type: <span class="required">*</span></dt>
<dd>
<label>
  <input type="radio" name="RadioGroup1" value="Silver" id="RadioGroup1_0" onClick="changeplanprice();" class="RadioGroup1" />
  Silver</label>
<br>
<label>
  <input type="radio" name="RadioGroup1" value="Gold" id="RadioGroup1_1" onClick="changeplanprice();" class="RadioGroup1" />
  Gold</label>
<br>
<label>
  <input type="radio" name="RadioGroup1" value="Platinum" id="RadioGroup1_2" onClick="changeplanprice();" class="RadioGroup1" />
  Platinum</label>
<br>
<label>
  <input type="radio" name="RadioGroup1" value="All-in-one" id="RadioGroup1_3" onClick="changeplanprice();" class="RadioGroup1" />
  All-in-one</label>
<br>
<span class="radioRequiredMsg">Please make a selection.<span class="hint-pointer">&nbsp;</span></span>
</dd>
</div>

<!--Plan Duration-->

<div id="spryradio2">
<dt>Plan Duration: <span class="required">*</span></dt>
<dd>
<label>
  <input type="radio" name="RadioGroup2" value="Yearly" id="RadioGroup2_0" onClick="changeplanprice();" class="RadioGroup2" />
  Yearly</label>
<br>
<label>
  <input type="radio" name="RadioGroup2" value="Quaterly" id="RadioGroup2_1" onClick="changeplanprice();" class="RadioGroup2" />
  Quaterly</label>
<br>
<label>
  <input type="radio" name="RadioGroup2" value="Monthly" id="RadioGroup2_2" onClick="changeplanprice();" class="RadioGroup2" />
  Monthly</label>
<br>
<label>
  <input type="radio" name="RadioGroup2" value="Other" id="RadioGroup2_3" onClick="changeplanprice();" class="RadioGroup2" />
  Other</label>
<br>
<span class="radioRequiredMsg">Please make a selection.<span class="hint-pointer">&nbsp;</span></span>
</dd>
</div>

<!--Plan Price-->
<div>

     <script>
     function changeplanprice() {
         var plantype=document.getElementByClassName('RadioGroup1').value;
         var planduration=document.getElementByClassName('RadioGroup2').value;
         if(plantype=="Silver") {
             if(planduration=="Monthly")     {
                 document.getElementById('Price').value='£ 39.98';
                 document.getElementById('Price').readOnly=true;
                 }
             else if(planduration=="Quaterly")  {
                 document.getElementById('Price').value='£ 79.98';
                 document.getElementById('Price').readOnly=true;
                 }
             else if(planduration=="Yearly")    {
                 document.getElementById('Price').value='£ 124.98';
                 document.getElementById('Price').readOnly=true;
                 }
             else if(planduration=="Other")     {
                 document.getElementById('Price').value='';
                 document.getElementById('Price').readOnly=false;
                 }
                 }
             else if(plantype=="Gold")  {
                 if(planduration=="Monthly")    {
                 document.getElementById('Price').value='£ 49.98';
                 document.getElementById('Price').readOnly=true;
                 }
             else if(planduration=="Quaterly")  {
                 document.getElementById('Price').value='£ 99.98';
                 document.getElementById('Price').readOnly=true;
                 }
             else if(planduration=="Yearly")    {
                 document.getElementById('Price').value='£ 179.98';
                 document.getElementById('Price').readOnly=true;
                 }
             else if(planduration=="Other")     {
                 document.getElementById('Price').value='';
                 document.getElementById('Price').readOnly=false;
                 }
                 }
             else if(plantype=="Platinum")  {
                 if(planduration=="Monthly")    {
                 document.getElementById('Price').value='£ 59.98';
                 document.getElementById('Price').readOnly=true;
                 }
             else if(planduration=="Quaterly")  {
                 document.getElementById('Price').value='£ 199.98';
                 document.getElementById('Price').readOnly=true;
                 }
             else if(planduration=="Yearly")    {
                 document.getElementById('Price').value='£ 279.98';
                 document.getElementById('Price').readOnly=true;
                 }
             else if(planduration=="Other")     {
                 document.getElementById('Price').value='';
                 document.getElementById('Price').readOnly=false;
                 }
                 } }
        </script>


<div>
<dt><label for="Price">Plan Price:</label></dt>
<dd class="bg"><input type="text" name="Price" id="Price" size="80" class="input" readonly="readonly"  />
</dd>
</div>
4

2 に答える 2

0

私が与える最初の提案は、シングルを持つことです

document.getElementById('Price').readOnly=true;

これにより、コードが読みやすくなります。2 番目の提案は、プランタイプ用と計画期間用の 2 つの配列を持つことができ、テキストの代わりにラジオ ボタンに値として配列インデックスを持たせることです。

これにより、コードが読みやすくなるだけでなく、管理しやすくなります。プラン期間を 1 つ追加する必要がある場合は、すべてのプランタイプに同じ条件を追加する必要があり、1 つのケースを見逃す可能性があるとします。

于 2012-05-08T12:57:54.787 に答える
0

あなたの関数は少しクリーンアップを使用できますが、私が見る問題が 1 つあります。を使用してdocument.getElementByClassName(' ... ').value;います。これは正しくありません。関数は実際にはdocument.getElementsByClassName(Elements は複数形であることに注意してください)。この関数は、そのクラス名を持つすべての要素の配列を返します。.valueそのため、直接呼び出すことはできません。要素の配列をループして、チェックされている要素を見つけ、その値を取得する必要があります。

1 つのグループのすべてのラジオ ボタンが同じ名前で、別の機能があることを考えると、document.getElementsByNameを使用する理由はありませんgetElementsByClassName。

私はあなたの機能を変更します。これはテスト済みで機能しており、新しい価格設定オプションを思いついた場合に備えて、より簡単に拡張できます. pricesオブジェクトに追加するだけです。

function changeplanprice() {
    var plantype;
    var plantypes = document.getElementsByName('RadioGroup1');
    for (var i=0; i < plantypes.length; i++) {
        if (plantypes[i].checked)
            plantype = plantypes[i].value;
    }

    var planduration;
    var plandurations = document.getElementsByName('RadioGroup2');
    for (i = 0; i < plandurations.length; i++) {
        if (plandurations[i].checked)
            planduration = plandurations[i].value;
    }

    if (plantype === undefined || planduration === undefined)
        return;

    document.getElementById('Price').readOnly = (planduration != "Other");

    var prices = {
        "Silver":{
            "Monthly":"£ 39.98",
            "Quarterly":"£ 79.98",
            "Yearly":"£ 124.98",
            "Other":""
        },
        "Gold":{
            "Monthly":"£ 49.98",
            "Quarterly":"£ 99.98",
            "Yearly":"£ 179.98",
            "Other":""
        },
        "Platinum":{
            "Monthly":"£ 59.98",
            "Quarterly":"£ 199.98",
            "Yearly":"£ 279.98",
            "Other":""
        },
        "All-in-one":{
            "Monthly":"...",  /* prices weren't provided for All-in-one in the example */
            "Quarterly":"...",
            "Yearly":"...",
            "Other":""
        }
    };

    document.getElementById('Price').value = prices[plantype][planduration];
}
于 2012-05-09T12:27:46.723 に答える