値を更新するスクリプト

Question

ユーザーが周期性を選択したときに価格を変更するスクリプトの作成に問題があります。

3つのピリオドセレクタを作成する必要があり、それぞれが個別に動作する必要があります。例：Selector Oneはdiv Oneの値だけを変更します。セレクタ2はDiv Twoなどの値のみを変更します。

スクリプトを複製しようとしましたが、動作しません。

誰かが私を助けることができますか？

デモ：https://jsfiddle.net/LittleDamon/y9755dq7/

<div id="one"> 
    $ 3 
    <span class="period">Monthly</span> 
</div> 
<form class="plans"> 
    <select id="plans" onChange="ChangeText('plans');"> 
     <option value="0">Monthly</option> 
     <option value="1">Quarterly</option> 
     <option value="2">Semestral</option> 
     <option value="3">Yearly</option> 
    </select> 
</form> 
<div id="two"> 
    $ 6 
    <span class="period">Monthly</span> 
</div> 
<form class="plans"> 
    <select id="plans" onChange="ChangeText('plans');"> 
     <option value="0">Monthly</option> 
     <option value="1">Quarterly</option> 
     <option value="2">Semestral</option> 
     <option value="3">Yearly</option> 
    </select> 
</form> 
<div id="three"> 
    $ 9 
    <span class="period">Monthly</span> 
</div> 
<form class="plans"> 
    <select id="plans" onChange="ChangeText('plans');"> 
     <option value="0">Monthly</option> 
     <option value="1">Quarterly</option> 
     <option value="2">Semestral</option> 
     <option value="3">Yearly</option> 
    </select> 
</form> 
<script type="text/javascript"> 

Answer 1

私はこれが何をしたいと思います。

コードに問題があります。

1. あなたの配列の宣言が間違っていました。
2. すべてのselectタグに同じIDを指定しました。

コードを修正しました。スニペットを確認してください。

var one = new Array(
 
    '$ 3', 
 
    '$ 4', 
 
    '$ 5', 
 
    '$ 6' 
 
); 
 

 
var two = new Array(
 
    '$ 6', 
 
    '$ 7', 
 
    '$ 8', 
 
    '$ 9' 
 
); 
 

 
var three = new Array(
 
    '$ 9', 
 
    '$ 10', 
 
    '$ 11', 
 
    '$ 12' 
 
); 
 

 
function ChangeText(elemid) { 
 
    switch (elemid) { 
 
     case "plan1": 
 
      var ind = document.getElementById(elemid).selectedIndex; 
 
      document.getElementById("one").innerHTML = one[ind]; 
 
      break; 
 
     case "plan2": 
 
      var ind = document.getElementById(elemid).selectedIndex; 
 
      document.getElementById("two").innerHTML = two[ind]; 
 
      break; 
 
     case "plan3": 
 
      var ind = document.getElementById(elemid).selectedIndex; 
 
      document.getElementById("three").innerHTML = three[ind]; 
 
      break; 
 
    } 
 
}

<div id="one"> 
 
    $ 3 
 
    <span class="period">Monthly</span> \t 
 
</div> 
 
<form class="plans"> 
 
    <select id="plan1" onChange="ChangeText('plan1');"> 
 
     <option value="0">Monthly</option> 
 
     <option value="1">Quarterly</option> 
 
     <option value="2">Semestral</option> 
 
     <option value="3">Yearly</option> 
 
    </select> 
 
</form> 
 
<div id="two"> 
 
    $ 6 
 
    <span class="period">Monthly</span> \t 
 
</div> 
 
<form class="plans"> 
 
    <select id="plan2" onChange="ChangeText('plan2');"> 
 
     <option value="0">Monthly</option> 
 
     <option value="1">Quarterly</option> 
 
     <option value="2">Semestral</option> 
 
     <option value="3">Yearly</option> 
 
    </select> 
 
</form> 
 
<div id="three"> 
 
    $ 9 
 
    <span class="period">Monthly</span> \t 
 
</div> 
 
<form class="plans"> 
 
    <select id="plan3" onChange="ChangeText('plan3');"> 
 
     <option value="0">Monthly</option> 
 
     <option value="1">Quarterly</option> 
 
     <option value="2">Semestral</option> 
 
     <option value="3">Yearly</option> 
 
    </select> 
 
</form>