そのjavascriptを5セット〜10セットくらい作りたい

Question

｢リアルタイムにカンマ(金額)を付けたい｣の続きの質問です。
出来上がったjavascriptを表題のタイトル通りにしたいです。
つまり、その①↓

    <table>
      <tr>
        <th></th>
        <th>平米数(㎡)</th>    
        <th class="result">坪数</th>
        <th>坪単価(円/坪)</th>
        <th class="result">金額(円)</th>
      </tr>
      <tr>
        <td><input type="text" name="se01_a" value=""></td>
        <td><input type="text" name="se01_b" value="" id="se01_b"></td>
        <td class="result"><span id="tsubo"></span></td>
        <td><input type="text" name="se01_c" value="" id="se01_c"></td>
        <td class="result"><span id="kingaku"></span></td>
      </tr>
      <tr>
        <!-- 上記の同じコード -->
      </tr>
        ・
        ・
        ・
    </table>

又は、その②

   <table>
      <tr>
        <th></th>
        <th>平米数(㎡)</th>    
        <th class="result">坪数</th>
        <th>坪単価(円/坪)</th>
        <th class="result">金額(円)</th>
      </tr>
      <tr>
        <td><input type="text" name="se01_a" value=""></td>
        <td><input type="text" name="se01_b" value="" id="se01_b"></td>
        <td class="result"><span id="tsubo"></span></td>
        <td><input type="text" name="se01_c" value="" id="se01_c"></td>
        <td class="result"><span id="kingaku"></span></td>
      </tr>
    </table>
    <table>
      <!-- 上記の同じコード -->
    </table>
        ・
        ・
        ・

javascriptでは、

function price({se01_b, se01_c}) {
        ・
        ・
        ・
}

↑
｢price｣を｢price1｣、｢price2｣、｢price3｣・・・にしたり、
｢tsubo｣や｢kingaku｣も｢tsubo1｣、｢tsubo2｣、｢kingaku1｣、｢kingaku2｣・・・にしたりして、javascriptのコードが膨大になってしまう。
それをコンパクトに出来ますでしょうか？

Comments

[m.ts10806]

リンクURLを貼れるので該当の質問への導線をはってください。でないと省略しすぎコードで、前の質問への導線もなく探す必要が出てくるので回答者側の手間が増えて回答がつきにくくなります。

[amaryllis]

すみませんでした。こちらになります。https://teratail.com/questions/144292

[m.ts10806]

質問本文に追記してください。質問は編集できますし、このコメント欄はデフォルト非表示なので目につきにくいです。

[amaryllis]

function price({se01_b, se01_c}) { }を5セット〜10セットくらい作りたいことです。同じように作るとinputが全部出てしまうでしょう。だから、｢price1｣、｢price2｣、｢price3｣のように作ると膨大になるからコンパクトに出来ないか？と聞いています。

[m.ts10806]

(２回目)質問本文に追記してください。質問は編集できますし、このコメント欄はデフォルト非表示なので目につきにくいです。

[amaryllis]

mts10806さん、回答をありがとうございます。本当に申し訳ございませんが、https://teratail.com/questions/144292のサイトにjun68yktさんが回答してくださった｢追記2｣のURLの通りで出来ました。あとは、htmlのその②の場合は｢追記2｣に記しているjavascriptのコードで大丈夫でしょうか？と、聞いて回答を待っています。

[amaryllis]

修正。htmlのその②の場合は｢追記2｣に記しているjavascriptのコードで大丈夫でしょうか？→上記のhtmlのその②の場合は｢追記2｣に記しているjavascriptのコードそのままで大丈夫でしょうか？

[m.ts10806]

質問本文を修正してくださいとお願いしているのですが。

[think49]

https://teratail.com/questions/edit/144394

Answer 1

price()がどのように呼び出されているかわかりませんが、
例えば下記のようになっているとして、

<input type="text" name="se01_a" value="" onkeypress="price()">

このようにすると

<input type="text" name="se01_a" value="" onkeypress="price(this)">

function price(element){
  console.log(element);
}

onkeypressで動作したinput自身が取得できます。
そこで

function price(element){
  console.log(element.value);
}

とすると入力値がとれます。

ヒントになれば幸いです。

ミニマムサンプルコード

「左の値と右の値を足した結果をその隣のフィールドに表示」というミニマムサンプルコードです。
幾つフォームのセットが増えても関数は１つで左右与えられる情報の型が違っても（Elementそのものとフィールド名）
関係なく計算ができているのがわかると思います。

※イベント発生度合いから最初のコードで提示したonkeypressではなくonkeyupに変更しています。
単に計算しているだけの機能なのでメソッド名もpriceからcalcに変更しています。
※片方が入力されなかった場合や半角数値ではなかった場合などは考慮していません。本当にミニマム構成です。

これをそのままいきなりやろうとしていることに当てはめようとしないでください。
「関数を１つでやりきるためのヒント・考え方」の１つとして捉えてください。
おそらくこの考え方を理解できないとこの質問でやろうとしていることは実現不可能と思ってください。

<input type="text" name="a1" id="a1" onkeyup="calc(this,'b1','result1')">＋    
<input type="text" name="b1" id="b1" onkeyup="calc(this,'a1','result1')">＝
<span id="result1"></span>
<br />
<input type="text" name="a2" id="a2" onkeyup="calc(this,'b2','result2')">＋  
<input type="text" name="b2" id="b2" onkeyup="calc(this,'a2','result2')">＝
<span id="result2"></span>
<br />
<input type="text" name="a3" id="a3" onkeyup="calc(this,'b3','result3')">＋  
<input type="text" name="b3" id="b3" onkeyup="calc(this,'a3','result3')">＝
<span id="result3"></span>

function calc(calc1,calc2,res){
    var ca1 = parseInt(calc1.value);
    var ca2 = parseInt(document.getElementById(calc2).value);
    var resField = document.getElementById(res);
    resField.textContent = ca1+ca2;
}    

「そっくりそのまま使えるコード」をもらっても理解できないままそのコードを以て丸投げ質問している人も多いです。それはコードを提示してくれた人にも失礼ですし、はっきり言うと迷惑です（この質問者さんがそうというわけではないですがそうなる恐れがあります）。
理解できてないなら解決済みにしないようにしてくださいね。

まずは提示された回答のコードをきちんと理解するところから。
すべてのコードは１つ１つ意味がありますし、意味を持たせたコードを組まなければなりません。

Comments

[amaryllis]

回答をありがとうございます。
そのコードをどのようにすれば良いか？ちんぷんかんです。
すみません。
あと、function priceだけではなく、その上の
var inputs = document.getElementsByTagName('input');

for (var i=0; i < inputs.length; i ++ ) {
inputs[i].addEventListener('input', inputHandler);
}

function inputHandler(e) {
・
・
・
}
も5セット〜10セット必要でしょうか？

[m.ts10806]

どこまでわかっていてどこまでわかっていないのかがわかりません。
「変数とは」ということから必要ですか？
関数も同じですよ。何個も同じ処理を別の名前で書くなら関数の意味がないです。集約するためにどうしたらいいのか考えることが”ロジック”となります。
ミニマムサンプルコードを提示するのはやぶさかではありませんが、それをもっても「ちんぷんかんぷん」と言われるてしまう恐れがあるので、本当に「変数とは」「関数とは」からやり直してもらわないといけなくなります。
というのを踏まえて私の回答をどう理解しましたか？１０のうち幾つくらいの理解度ですか？いきなり「今やろうとしてることに反映ししよう」と考えていませんか？それは無理な話です。
まずは回答内容でどのような効果が得られるか検証してみてください。コードを見ていても何も理解は進みませんよ。

[m.ts10806]

ひとまず↑で言及した「ミニマムサンプルコード」を後ほど、本当に簡単なものを書きます。それを以て「どうすればいいか」考えてみてください。
ちなみに前の質問でどう作動させたかなどは全く関係のない組み方をします。
「実現方法はひとつではない」ということです。（最適か最良か最速は別として）

[m.ts10806]

考え方は「JavaScriptをその数だけ用意する」のではなく、
「JavaScriptを１つだけで済むようにhtmlを用意する」です。
場合によりIDのつけ方や呼び出し方などを適宜調整する必要があります。

Answer 2

リアルタイムにカンマ(金額)を付けたいのページにjun68yktさんが回答(2018/09/02 19:59)してくださったので、回答受付を終了します。
みなさん、回答してくださってありがとうございました。

Comments

[m.ts10806]

質問修正依頼を対応しない、他の質問に追記されたからそれで終了って

そのうち誰もあなたの質問に回答しなくなりますよ。
わからないことをスルーする癖もやめたほうがいいですね。
丸投げて完成コードだけもらいたいならアウトソーシングされたほうが良いです。

[amaryllis]

私だって、｢わからないので、コードを教えてください｣と、コード無しで丸投げ質問しないよう、コードを加えて、質問を立てました。
コードは自分なりにやってみて、壁に当たり、解決の糸口が見つからなかった時点で、コードを入れて質問しました。
もちろん、jun68yktさんにこだわって回答してもらうのではないです。
誰だって、回答してもらっていいですよ。
jun68yktさんやmts10806さんが回答してくださったときは、3時間くらい席を離れていたから、22時頃に戻って回答を見てそのコードで動かしてみた時点で、解決になったから、受付を終了しました。

[m.ts10806]

で、そのコードちゃんと理解できたんですよね？
私の回答にもコメント書いてますが、ちゃんと理解したうえで解決としないと回答者に失礼です。
というかすでに解決した質問に追記させてしまってますよね。相手するのは好き好きですが、使い方としてどうだろうと。
コメント見てると「もらったコードが動いたから解決」としているように見受けられます。
「もらったコード動かしましたダメでした。」みたいな。工夫が見えるコメントが一切ないです。
それって「わからないので、コードを教えてください」とどう違いますか？

さて、この回答になぜ低評価が複数ついているか理解できますか？

[m.ts10806]

次からで結構なので、質問に「初心者アイコン」つけておいてくださいね。
でないとある程度のヒントで解決可能と判断されるケースが多いです。
質問の編集の仕方もちゃんと検証しておいてください。
この内容の質問連発、解決方法連発されたらさすがに回答する人どんどん減ると思いますよ。

[think49]

To: amaryllisさん
amaryllis さんは「回答して、質問者が解決に向かうために必要であろうことを補足要求して、それを何度も繰り返す時間を費やした末に、回答/アドバイスに対して、何の返答もなく、『～さんの回答で解決しました』と質問者が書いた時のmts10806さんの気持ち」を少しでも考えましたか。
あなたがmts10806さんの立場だったらどうですか。質問者が解決した事を心から喜べますか。

私は喜べません。「自分が費やした時間は何だったのか」と落胆します。
私はamaryllisさんを「他人の心情を慮れない不誠実な人」と評価し、低評価に投じました。

[terminator]

所詮クレクレ君。「思考するエンジニア」でないのであれば、amaryllisさんが来るところではありません。

[amaryllis]

mts10806さん、think49さん、terminatorさん、お怒りを受け、申し訳ございませんでした。
これからは、気をつけます。

「初心者アイコン」があることは知りませんでした。すみませんでした。
↑
｢すみませんでした｣だけでは、済むことじゃないことですが、知らないまま、質問してしまい、低評価になってしまった。

質問の編集の仕方が大事ですが、話し下手なので、すみません。

本当にありがとうございました。

[m.ts10806]

そこでまずこの質問から編集してみようとなるのを期待していましたが、終わった（ほぼなかったこと）ことにするのですね。大変残念です。
低評価に対する理由がつくだけでもありがたいことなのに、このコメントだけではどこまで理解してどこまで受け止められたかわからないのが大変残念ですね。
作業依頼をするサイトではないことだけは心にとどめておいてくださいね。自分がそういうつもりがなくても第三者から見るとamaryllisさんのやり方は作業依頼とイコールです。
費用が発生しないのがおかしい内容をどんどん依頼しています。少し離れて自身のやり方を見つめなおすと良いでしょう。