関数に空の配列をセットする方法

ラジオボタンを使って、それぞれ選択肢にvalue値に点数を設定しております。
【arrayAbilityの配列出力ボタン】（Q1〜Q3迄)、
【arrayMindの配列出力ボタン】(Q4〜Q6迄）を発火点として、
区切り毎に取得点数を空の配列にセットしたく、下記コードを設定したのですが、
仮引数のつもりで設定したarrayAddに、実引数の'.ability'、'.mind'
が代入されてしまい、上手く行きません。

html
1  <div class="radio-wrapper">
2    <section class="radio-inner-wrapper container">
3      <h2>classnameはability？</h2>
4      <fieldset>
5        <div class="question">Q1？</div>
6        <label><input type="radio" class="ability" name="Q1" value="5">はい</label>
7        <label><input type="radio" class="ability" name="Q1" value="3">は？</label>
8        <label><input type="radio" class="ability" name="Q1" value="2">い？</label>
9        <label><input type="radio" class="ability" name="Q1" value="0">いいえ</label>
10      </fieldset>
11
12      <fieldset>
13        <div class="question">Q2？</div>
14        <label><input type="radio" class="ability" name="Q2" value="5">はい</label>
15        <label><input type="radio" class="ability" name="Q2" value="3">は？</label>
16        <label><input type="radio" class="ability" name="Q2" value="2">い？</label>
17        <label><input type="radio" class="ability" name="Q2" value="0">いいえ</label>
18      </fieldset>
19
20      <fieldset>
21        <div class="question">Q3？</div>
22        <label><input type="radio" class="ability" name="Q3" value="5">はい</label>
23        <label><input type="radio" class="ability" name="Q3" value="3">は？</label>
24        <label><input type="radio" class="ability" name="Q3" value="2">い？</label>
25        <label><input type="radio" class="ability" name="Q3" value="0">いいえ</label>
26      </fieldset>
27
28      <div id="doneAbility" class="btn">【arrayAbilityの配列出力ボタン】</div>
29
30    </section>
31
32    <section class="radio-inner-wrapper container">
33      <h2>classnameはmind？</h2>
34
35      <fieldset>
36        <div class="question">Q4？</div>
37        <label><input type="radio" class="mind" name="Q4" value="5">はい</label>
38        <label><input type="radio" class="mind" name="Q4" value="3">は？</label>
39        <label><input type="radio" class="mind" name="Q4" value="2">い？</label>
40        <label><input type="radio" class="mind" name="Q4" value="0">いいえ</label>
41      </fieldset>
42
43      <fieldset>
44        <div class="question">Q5？</div>
45        <label><input type="radio" class="mind" name="Q5" value="5">はい</label>
46        <label><input type="radio" class="mind" name="Q5" value="3">は？</label>
47        <label><input type="radio" class="mind" name="Q5" value="2">い？</label>
48        <label><input type="radio" class="mind" name="Q5" value="0">いいえ</label>
49      </fieldset>
50
51      <fieldset>
52        <div class="question">Q6？</div>
53        <label><input type="radio" class="mind" name="Q6" value="5">はい</label>
54        <label><input type="radio" class="mind" name="Q6" value="3">は？</label>
55        <label><input type="radio" class="mind" name="Q6" value="2">い？</label>
56        <label><input type="radio" class="mind" name="Q6" value="0">いいえ</label>
57      </fieldset>
58
59            <div id="doneMind" class="btn">【arrayMindの配列出力ボタン】</div>
60
61    </section>
62
63
64  <div class="container">
65    <table>
66      <thead>
67        <tr>
68          <th>Q1-Q3のvalue合計</th>
69          <th>Q4-Q6のvalue合計</th>
70          <th>総合計</th>
71        </tr>
72      </thead>
73      <tbody>
74        <tr>
75          <td id="abilityTotal">00点</td>
76          <td id="mindTotal">00点</td>
77          <td id="groundTotal">00点</td>
78        </tr>
79      </tbody>
80    </table>
81  </div>
82
83

JavaScript
1  //○○○○○○○○○○○○○   集計始め   ○○○○○○○○○○○○○
2  window.addEventListener('DOMContentLoaded', () => {
3
4    const doneAbility = document.getElementById('doneAbility');
5    const doneMind = document.getElementById('doneMind');
6
7
8    let arrayAbility = [];
9    let arrayMind = [];
10
11
12    function getRadioValue(name, arrayAdd) {
13      name = document.querySelectorAll(name);
14      arrayAdd = [];
15      for (let i = 0; i < name.length; i++) {
16        if (name[i].checked) {
17          arrayAdd.push(name[i].value);
18        }
19      }
20      console.log(arrayAdd);
21    }
22
23
24    //＊＊＊＊＊  Q1 - Q3 (arrayAbility)  ＊＊＊＊＊
25    doneAbility.addEventListener('click', () => {
26      getRadioValue('.ability', 'arrayAbility');
27
28      console.log(arrayAbility);
29
30      //＊＊＊＊＊  終了  ＊＊＊＊＊
31    });
32
33
34    //＊＊＊＊＊  Q4 - Q6 (arrayMind)  ＊＊＊＊＊
35    doneMind.addEventListener('click', () => {
36      getRadioValue('.mind', 'arrayMind');
37
38      console.log(arrayMind);
39
40      //＊＊＊＊＊  終了  ＊＊＊＊＊
41    });
42
43    //○○○○○○○○○○○○○   集計終り   ○○○○○○○○○○○○○
44  });
45

大変恐縮ですが、仮引数であるarrayAddではなく、実引数arrayAbility, arrayMindにvalueをpushするにはどうすれば良いか教えてもらえると助かります。

どうぞよろしくお願い致します。

yambejp

2019/10/15 08:14

なにをした時に、どういったデータをどうしたいのでしょうか？見た感じ["5","2","3"]の["2","2","2"]が得られるのは正しく見えますが？

Nobu_Nobuta

2019/10/15 08:23

【arrayAbilityの配列出力ボタン】を押した時に、実引数である、let arrayAbility = [];に["5","2","3"]pushしたいです。 //＊＊＊＊＊ Q1 - Q3 (arrayAbility) ＊＊＊＊＊ doneAbility.addEventListener('click', () => { getRadioValue('.ability', 'arrayAbility'); console.log(arrayAbility); //＊＊＊＊＊終了＊＊＊＊＊ }); としているのに、仮引数である、arrayAdd = []; に["5","2","3"]にpushされてしまっております。同様に、【arrayMindの配列出力ボタン】を押した時に、仮引数である、arrayAdd = []; に["5","2","3"]pushではなく、実引数である、let arrayMind = [];に["5","2","3"]pushしたいです。どうぞ宜しくお願い致します。

行動規範の内容に同意します

回答2件

ベストアンサー

質問の意図がわからない部分もありますがこんな感じですか？

javascript
1<script>
2window.addEventListener('DOMContentLoaded', ()=>{
3  let arrayAbility = [];
4  let arrayMind = [];
5  [].forEach.call(document.querySelectorAll('.ability'),x=>{
6    x.addEventListener('change',e=>{
7      arrayAbility=[].map.call(document.querySelectorAll('.ability:checked'),x=>x.value);
8      console.log(arrayAbility);
9    });
10  });
11  [].forEach.call(document.querySelectorAll('.mind'),x=>{
12    x.addEventListener('change',e=>{
13      arrayMind=[].map.call(document.querySelectorAll('.mind:checked'),x=>x.value);
14      console.log(arrayMind);
15    });
16  });
17});
18</script>
19<div class="radio-wrapper">
20    <section class="radio-inner-wrapper container">
21      <h2>classnameはability？</h2>
22      <fieldset>
23        <legend class="question">Q1？</legend>
24        <label><input type="radio" class="ability" name="Q1" value="5">はい</label>
25        <label><input type="radio" class="ability" name="Q1" value="3">は？</label>
26        <label><input type="radio" class="ability" name="Q1" value="2">い？</label>
27        <label><input type="radio" class="ability" name="Q1" value="0">いいえ</label>
28      </fieldset>
29      <fieldset>
30        <legend class="question">Q2？</legend>
31        <label><input type="radio" class="ability" name="Q2" value="5">はい</label>
32        <label><input type="radio" class="ability" name="Q2" value="3">は？</label>
33        <label><input type="radio" class="ability" name="Q2" value="2">い？</label>
34        <label><input type="radio" class="ability" name="Q2" value="0">いいえ</label>
35      </fieldset>
36      <fieldset>
37        <legend class="question">Q3？</legend>
38        <label><input type="radio" class="ability" name="Q3" value="5">はい</label>
39        <label><input type="radio" class="ability" name="Q3" value="3">は？</label>
40        <label><input type="radio" class="ability" name="Q3" value="2">い？</label>
41        <label><input type="radio" class="ability" name="Q3" value="0">いいえ</label>
42      </fieldset>
43      <legend id="doneAbility" class="btn">【arrayAbilityの配列出力ボタン】</legend>
44    </section>
45    <section class="radio-inner-wrapper container">
46      <h2>classnameはmind？</h2>
47      <fieldset>
48        <legend class="question">Q4？</legend>
49        <label><input type="radio" class="mind" name="Q4" value="5">はい</label>
50        <label><input type="radio" class="mind" name="Q4" value="3">は？</label>
51        <label><input type="radio" class="mind" name="Q4" value="2">い？</label>
52        <label><input type="radio" class="mind" name="Q4" value="0">いいえ</label>
53      </fieldset>
54      <fieldset>
55        <legend class="question">Q5？</legend>
56        <label><input type="radio" class="mind" name="Q5" value="5">はい</label>
57        <label><input type="radio" class="mind" name="Q5" value="3">は？</label>
58        <label><input type="radio" class="mind" name="Q5" value="2">い？</label>
59        <label><input type="radio" class="mind" name="Q5" value="0">いいえ</label>
60      </fieldset>
61      <fieldset>
62        <legend class="question">Q6？</legend>
63        <label><input type="radio" class="mind" name="Q6" value="5">はい</label>
64        <label><input type="radio" class="mind" name="Q6" value="3">は？</label>
65        <label><input type="radio" class="mind" name="Q6" value="2">い？</label>
66        <label><input type="radio" class="mind" name="Q6" value="0">いいえ</label>
67      </fieldset>
68      <div id="doneMind" class="btn">【arrayMindの配列出力ボタン】</div
69    </section>
70</div>

投稿2019/10/15 08:34

yambejp

総合スコア116661

Nobu_Nobuta

2019/10/15 09:29

早速のコード修正ありがとうございます。申し訳ありません。頂いたコードですが、私の理解度を超えておりまして、コードを読むのにお時間を頂ければと思います。やりたい事の補足説明として、htmlに、tableタグとしてQ1-Q3の小計、Q4-Q6の小計、総合計を表示したいです。そして、夫々の点数に応じてswitch文で表示メッセージを変えたいと思っております。相性診断のようなアプリを作成したいと思っております。

Nobu_Nobuta

2019/10/15 10:54 編集

自己解決にコードをupしてみました。

行動規範の内容に同意します

させて頂いた質問とは方向性が違ってしまいましたが、
私の方でも、下記作成してみました。

JavaScript
1//○○○○○○○○○○○○○ 集計始め ○○○○○○○○○○○○○
2window.addEventListener('DOMContentLoaded', () => {
3
4const doneAbility = document.getElementById('doneAbility');
5const doneMind = document.getElementById('doneMind');
6
7
8let arrayAbility = [];
9let arrayMind = [];
10
11
12function getRadioValue(name) {
13name = document.querySelectorAll(name);
14let arrayAdd = [];
15for (let i = 0; i < name.length; i++) {
16const nameValue = parseFloat(name[i].value);
17if (name[i].checked) {
18arrayAdd.push(nameValue);
19}
20}
21console.log(arrayAdd);
22return arrayAdd;
23}
24
25//＊＊＊＊＊ Q1 - Q3 (arrayAbility) ＊＊＊＊＊
26doneAbility.addEventListener('click', () => {
27let arrayAbility = getRadioValue('.ability');
28
29let sumAbility = arrayAbility.reduce(function(a, b) {
30return a + b;
31})
32
33console.log(sumAbility);
34
35//＊＊＊＊＊ 終了 ＊＊＊＊＊
36});
37
38//＊＊＊＊＊ Q4 - Q6 (arrayMind) ＊＊＊＊＊
39doneMind.addEventListener('click', () => {
40let arrayMind = getRadioValue('.mind');
41
42let sumMind = arrayMind.reduce(function(a, b) {
43return a + b;
44})
45
46console.log(sumMind);
47
48//＊＊＊＊＊ 終了 ＊＊＊＊＊
49});
50
51//○○○○○○○○○○○○○ 集計終り ○○○○○○○○○○○○○
52});