javascriptで配列の中の文字列をつかってループさせたいです。

Question

前提・実現したいこと

javascriptで計算をするwebアプリを作ろうとしていますが、躓いてしまいました。

発生している問題・エラーメッセージ

htmlは

 <form name="frm1">
        <p>値1</p>
        <input type="number" name ="a_1" value=0>
        <p>値2</p>
        <input type="number" name ="a_2" value=0>

<form name="frm2">

        <p>サブ値1</p>
        <input type="number" name ="b_1" value=0>
        <p>サブ値2</p>
        <input type="number" name ="b_2" value=0>

<form name="frm3">

        <p合計1</p>
        <input type="text" name="sum_1" value=0>
        <p>合計2</p>
        <input type="text" name="sum_2" value=0>

としていて、frm1とfrm2のインプットタグの中の値をfrm3のインプットタグに返す(値1+サブ値1 = 合計1)ように対応した処理をしたく、javascriptは

       frm3.sum_1.value = (eval(frm1.a_1.value) + eval(frm2.b_1.value));
       frm3.sum_2.value = (eval(frm1.a_2.value) + eval(frm2.b_2.value));

と書きました。
これだと問題なく処理できるのですが、同じような処理をこれ以外にも何回もするので配列を作成してループさせたいと思い試してみたところで躓いてしまいました。

実際に書いてみたものは

var num =['1','2'];
for (let i=0;i< num.length ;i++){
frm3.sum_num[i].value = (eval(frm1.a_num[i].value) + eval(frm2.b_num[i].value));
}

で、値の合計が返されません。
sum_num[i]の部分に問題があると思うのですが、どのようにして配列の中の文字を連結させればよいのでしょうか？

宜しくお願いします。

Comments

[m.ts10806]

コードやエラーはマークダウンのcode機能を利用してご提示ください。
https://teratail.com/questions/238564

「躓いた」とは具体的にどういう問題が起きているのでしょう。
https://teratail.com/help/question-tips#questionTips3-4

[ghjkl]

ご指摘ありがとうございます。
提示して頂いたURLを参考に質問の方を編集させて頂きました。

まだまだ至らぬ点が多いと思いますがよろしくお願い申し上げます。

[itagagaki]

> どのようにして配列の中の文字を連結させればよいのでしょうか？
その配列は存在していますか？そうは見えないのですが。

Answer 1

javascriptのオブジェクトの要素にアクセスする方法として、

const a = {
   b : "1",
   c : "2",
}

があるとすると、a.bとa["b"]という２通りの方法でのアクセスが可能です。

前者の場合は、要素名は直接指定するため、変数等を用いて任意に変更することはできませんが、後者の場合は文字列で指定するため、任意の要素にアクセスすることが可能です。

前置きが長くなりましたが、frm3.sum_1にアクセスする方法はもう一つ、frm3["sum_1"]があり、数値の部分を変数に置き換えるとfrm3["sum_" + i](もしくはfrm3[`sum_${i}`])となります。

Comments

[ghjkl]

アクセスの方法について丁寧なご回答ありがとうございます。

まさに自分が知りたかった要素名に変数名を指定する方法で、実際に実行してみたところ無事処理できました。
この度はありがとうございました。