DOMにおけるjs中でイベントを発生させたい

Question

昨日、ご質問をさせていただきました、ykek1108です。
Qookerというアンケートサービスのhtml中にJavaScriptを実装し、数値入力欄に「0」を代入することが無事にできました。
ありがとうございます。細切れになって恐縮ですが、今度は、この「0」の数値を変更したタイミングで、計算式を実行し、
別の入力欄に結果を表示したいと思っておりますが、DOMでのイベントが発生せず、動作しておりません。何度も恐縮ですが、
方法についてご教示いただければと思い、再度投稿させていただきました。どうぞよろしくお願いいたします。

Qookerによって生成されたHTMLは以下の通りです。

   <tr>
    <th class="matrix_column">
       （02）合計数　＝　(02)①＋(02)②　※自動計算
    </th>        
      <td id="response_f_94-10-1-0" class="matrix_select" >
      　<input name="response_data[response_f_94][q1_2][_n]" type="text" value="" class="matrix_number">       
    　</td>    
   </tr>
   <tr>
    <th class="matrix_column_reverse">
                （02）①数値1
    </th>       
      <td id="response_f_94-10-2-0" class="matrix_select_reverse" >
      　<input name="response_data[response_f_94][q1_2_1][_n]" type="text" value="" class="matrix_number">       
    　</td>
    
   </tr>
   <tr>
     <th class="matrix_column">
                （02）②数値2
     </th>        
      <td id="response_f_94-10-3-0" class="matrix_select" >
      　<input name="response_data[response_f_94][q1_2_2][_n]" type="text" value="" class="matrix_number">       
    　</td>    
   </tr>

マトリクス上になったテーブルに、合計数と数値1、数値2の3つのテキストボックスがあり、ページ読み込み時はすべて「0」
と表示されております。ここで、数値1と数値2に数値を入れたとき、その合計数を「合計数」テキストボックスに表示させたい
と考えています。
次に示すJavaScriptは、このhtmlの下方に埋め込み形式で実装しています。

<script>
var aryTableTag = document.QFORM.getElementsByTagName("table");
var intVal1 = 0;
var intVal2 = 0;
var intVal3 = 0;
var strQ12 = "";
var strQ121 = "";
var strQ122 = "";

for (var i = 0; i < aryTableTag.length; i++){
    var objTableTag = aryTableTag[i];
    if (objTableTag.id == undefined || objTableTag.id.split("-")[2] != "matrix")
     {continue;}

    var strMatrixType = objTableTag.id.split("-")[1];

    var aryInputTag = objTableTag.getElementsByTagName("input");

    for (var j = 0; j < aryInputTag.length; j++){
       
          var strName = aryInputTag[j].name            

     if (strName.indexOf("[q1_2]") !== -1){
     aryInputTag[j].value = intVal3;
     strQ12 = strName; //合計数テキストボックスのname属性を取得
}
     if (strName.indexOf("[q1_2_1]") !== -1){
     aryInputTag[j].value = intVal1
     strQ121 = strName; //数値1 テキストボックスのname属性を取得
}

     if (strName.indexOf("[q1_2_2]") !== -1){
     aryInputTag[j].value = intVal2
      strQ122 = strName;　//数値2 テキストボックスのname属性を取得
}
}
}
//「合計数」テキストボックスにフォーカスがあったとき、「数値1」と「数値2」の合計を
//求め、「合計数」欄に表示させたい
    document.getElementsByName(strQ12).onfocus = function(){
     calA();   
     };
    function calA(){
    var intQ122 = strQ122.innerText
    var intQ121 = strQ121.innterText
    var intQ12 = intQ122 + intQ121
    strQ12.value = intQ12;
}
  
</script>

昨日ご教示いただいたのは、「合計数」「数値1」「数値2」にページロード時に「0」を代入することでした。
そこは成功しました。
そのあと、「合計数」のテキストボックスにフォーカスが入った際に、「数値1」+「数値2」を実行したいのですが、
何も起こりません。
何度も申し訳ございませんが、どなた様か、原因をご教示いただければ幸いです。
どうぞよろしくお願い致します。

Answer 1

document.getElementsByNameは要素を返しません。

getElementsByName() メソッドは、文書内で指定した name を持つ要素の NodeList コレクションを返します。

Document.getElementsByName() - Web API | MDN

解決方法は、配列のように扱うことです。

NodeList は Array とは異なりますが、 forEach() メソッドで処理を反復適用することは可能です。 Array.from() を使うことで Array に変換することができます。

NodeList - Web API | MDN

Comments

[yk1108]

Lhankor_Mhy様
ご回答ありがとうございます。まだまだ不勉強でした。
Mozilla等のサイトをしっかり学習するよう心がけます。

Answer 2

getElementsByNameは要素のリスト（NodeList）を返すので、1つしかない要素でも[0]をつける必要があります。

// document.getElementsByName(strQ12).onfocus
//                                    ↓
   document.getElementsByName(strQ12)[0].onfocus

【Document.getElementsByName() - Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Document/getElementsByName

Comments

[yk1108]

kei344様
ご回答ありがとうございます。
デバッガでdocument.getElementsByName(strQ12)を確認しましたところ、NodeListと
帰ってまいりました。ありがとうございます。
まだまだ不勉強でした。

Answer 3

全体像がわからないので提示されているソースの範囲で

<script>
window.addEventListener('DOMContentLoaded', function(e){
  [].forEach.call(document.querySelectorAll('.matrix_number'),function(x){
    x.value=0;
    x.addEventListener('input',function(e){
      var v1=parseFloat(document.querySelector('[name="response_data[response_f_94][q1_2_1][_n]"]').value)||0;
      var v2=parseFloat(document.querySelector('[name="response_data[response_f_94][q1_2_2][_n]"]').value)||0;
      document.querySelector('[name="response_data[response_f_94][q1_2][_n]"]').value=v1+v2;
    });
  });
});
</script>
<table>
<tbody>
   <tr>
    <th class="matrix_column">
       （02）合計数　＝　(02)①＋(02)②　※自動計算
    </th>        
      <td id="response_f_94-10-1-0" class="matrix_select" >
      　<input name="response_data[response_f_94][q1_2][_n]" type="text" value="" class="matrix_number" readonly>
    　</td>    
   </tr>
   <tr>
    <th class="matrix_column_reverse">
                （02）①数値1
    </th>       
      <td id="response_f_94-10-2-0" class="matrix_select_reverse" >
      　<input name="response_data[response_f_94][q1_2_1][_n]" type="text" value="" class="matrix_number">
    　</td>

   </tr>
   <tr>
     <th class="matrix_column">
                （02）②数値2
     </th>        
      <td id="response_f_94-10-3-0" class="matrix_select" >
      　<input name="response_data[response_f_94][q1_2_2][_n]" type="text" value="" class="matrix_number">
    　</td>    
   </tr>
</tbody>
</table>

Comments

[yk1108]

yambejpさん
ご回答ありがとうございます。
ご教示いただいた内容で一度試してみたいと思います。
ありがとうございました。

[yk1108]

yambejpさん
ありがとうございました。おかげさまで解決することができました。
複数の方から、今回は大変有益なご情報をいただくことができましたので、皆さん
のご回答をベストアンサーにさせていただきたいのですが、yambejpさんのご回答
から直接の解決方法を導くことができましたので、今回ベストアンサーとさせて
いただきます。ありがとうございました。