同じ計算処理をまとめたい

Question

javascriptで計算フォームを作成しております。
複数あるvalue(品物の単価)の合計がsyoukeiに出るようにしています。
forでまとめたいのですが、上手くいきません。
初心者で恐縮ですが、ご教示のほどよろしくお願いいたします。

追記　下記のjavascriptは綺麗に動いた例ですが、品物が増えるとその分追記しなくてはならないため、纏められないかと思いご質問させていただきました。

$(document).ready(function(){
	$('select').change(function() {
	var syoukei0= document.getElementsByName("syoukei0").value;
		syoukei0=0;
		$(".value0 input:text").each(function(){
			var value0 = $(this).val();
			syoukei0 = parseInt(value0)+syoukei0;                       
		});
		document.form.syoukei0.value = syoukei0; // 合計を表示
	});
});

$(document).ready(function(){
	$('select').change(function() {
	var syoukei1= document.getElementsByName("syoukei1").value;
		syoukei1=0;
		$(".value1 input:text").each(function(){
			var value1 = $(this).val();
			syoukei1 = parseInt(value1)+syoukei1;                       
		});
		document.form.syoukei1.value = syoukei1; // 合計を表示
	});
});

$(document).ready(function(){
	$('select').change(function() {
	var syoukei2= document.getElementsByName("syoukei2").value;
		syoukei2=0;
		$(".value2 input:text").each(function(){
			var value2 = $(this).val();
			syoukei2 = parseInt(value2)+syoukei2;                       
		});
		document.form.syoukei2.value = syoukei2; // 合計を表示
	});
});

HTMLも追記いたします。
他のscriptもありclassが乱立していますが、今回の質問では商品1～3横のinputに各商品の小計を入れることだけを目的としているためほかのscrptは記載はしておりません。必要であれば記載させていただきます。

<form method="post" name="form">
<table border="1">
<tr>
<th>詳細</th>
<th>単価</th>
<th>数量</th>
<th>金額</th>
</tr>

<tr class="title"><td colspan="4">商品1<input type="text" name="syoukei0" class="syoukeis" value="0" disabled></td></tr>
<tr class="rows">
  <td></td>
  <td class="tanka" >440円</td>
  <td><select name="goods1">
   <option value="0" selected>0</option>
   <option value="1">1</option>
  </select></td>
  <td class="value0"><input type="text" class="price" size="7" value="0"> 円</td>
</tr>
<tr class="title"><td colspan="4">商品2<input type="text" name="syoukei1" class="syoukeis" value="0" disabled></td></tr>
<tr class="rows">
 <td></td>
 <td class="tanka" >440円</td>
 <td><select name="goods2">
  <option value="0" selected>0</option>
  <option value="1">1</option>
 </select></td>
 <td class="value1"><input type="text" class="price" size="7" value="0"> 円</td>
</tr>

<tr class="title"><td colspan="4">商品3<input type="text" name="syoukei2" class="syoukeis" value="0" disabled></td></tr>
<tr class="rows">
 <td><font color="red">キャラ1</font></td>
 <td class="tanka">605円</td>
 <td ><select name="goods3">
  <option value="0" selected>0</option>
  <option value="1">1</option>
 </select></td>
 <td class="value2"><input type="text" class="price" size="7" value="0"> 円</td>
</tr>
<tr class="rows">
 <td><font color="blue">キャラ2</font></td>
 <td class="tanka" >605円</td>
 <td ><select name="goods4">
  <option value="0" selected>0</option>
  <option value="1">1</option>
 </select></td>  
 <td class="value2"><input type="text" class="price" size="7" value="0"> 円</td>
</tr>
<tr class="rows">
 <td><font color="yellow">キャラ3</font></td>
 <td class="tanka" >605円</td>
 <td ><select name="goods5">
  <option value="0" selected>0</option>
  <option value="1">1</option>
 </select></td>  
 <td class="value2"><input type="text" class="price" size="7" value="0"> 円</td>
</tr>
<a name="top"></a>
<tr >
 <td colspan="3" >
  <button type="button" id="hide">0円を非表示</button> 　合計</td>
 <td><a name="top"></a><input type="text" id="total" size="7" value="0"> 円</td>
</tr>
<tr>
 <td colspan="3" >特典</td>
 <td><input type="text" id="tokuten" size="7" value="0"> 枚</td>
</tr>
</table>

追記　試したこと

見よう見まねでやろうとしましたが、上手く動かなかったのでご質問した次第でございます。

$(document).ready(function(){
	$('select').change(function() {
	var syoukei= document.getElementsByName('[name^="syoukei"]').value;
       for( i = 0; i < syoukei.length; i++ ) {
		syoukei[ i ]=0;
		$(".value[ i ] input:text").each(function(){
			var value[ i ] = $(this).val();
			syoukei[ i ] = parseInt(value[ i ])+syoukei[ i ];                       
		});
		document.form.syoukei[ i ].value = syoukei[ i ]; // 合計を表示
	});
});
});

さらに追記　ご指摘を受けて

ご指摘を受け変更したのですが、上手く動きませんでした。(合計値が出されなかった)
どこにミスがあるかご教示いただけますと幸いです。

$(document).ready(function(){
	$('select').change(function() {
	var syoukei= document.querySelectorAll('[name^="syoukei"]');
       for( i = 0; i < syoukei.length; i++ ) {
		    syoukei[ i ]=0;
		$(".value"+i+" input:text").each(function(){
			var value[ i ] = $(this).val();
			syoukei[ i ] = parseInt(value[ i ])+syoukei[ i ];                       
		});
		document.form.syoukei[ i ].value = syoukei[ i ]; // 合計を表示
	});
});
});

さらに追記　2つめの回答を受けて

素人考えでいじった結果となります。
お手数おかけしますがよろしくお願いいたします。

$(document).ready(function(){
	$('select').change(function() {

// 金額入力欄をquerySelectorAllでまとめて取ってくる

let priceList = document.querySelectorAll('.price');
priceList.forEach( e => {
  // 各金額入力欄の対し、予めセットしている小計対象のname値を取得
  let targetSyoukeiClass = e.dataset.syoukei;
  // querySelectorで小計を加算するinputを特定
  let targetSyoukeiInput = document.querySelector(`input[name=${targetSyoukeiClass}]`);
  // 無事取得できたら、小計inputに金額を加算する

targetSyoukeiInput.value = 0;

  if(targetSyoukeiInput){
    targetSyoukeiInput.value = Number(targetSyoukeiInput.value) + Number(e.value);
  }
});
});
});
コード

Comments

[m.ts10806]

「うまくいかない」などで伝わる情報量はゼロなので
具体的に起きている現象を記載してください。
https://teratail.com/help/question-tips#questionTips3-4-1

あと、HTMLも提示されないと再現確認および調整ができません。
JavaScriptだけ直したところで要件通り動くかは別問題です。
リファクタリングしたいのでしたらHTMLから全体を見て検討する必要があります。

Answer 1

$(".value[ i ] input:text")

これだとiがiという文字列になってます。
変数として文字列連結してください。

$(".value"+i+" input:text")

あと、getElement s By Nameなのでnameだけを指定するためname=は不要な上に複数（リスト）で取得されます。
セレクタで指定したいならこちら
そして、いきなりvalueにはアクセスできません。（参考）
ループしてここに取り出す必要があります。

ただ、jQueryとVanillaJSが混ざってるので特にセレクタ部分は統一されたほうが良いです（結果は同じ）。

document.querySelectorAll('[name^="syoukei"]')
↓
$('[name^="syoukei"]')

Comments

[shiuri]

```Javascript
$(document).ready(function(){
$('select').change(function() {
var syoukei= document.querySelectorAll('[name^="syoukei"]');
for( i = 0; i < syoukei.length; i++ ) {
syoukei[ i ]=0;
$(".value"+i+" input:text").each(function(){
var value[ i ] = $(this).val();
syoukei[ i ] = parseInt(value[ i ])+syoukei[ i ];
});
document.form.syoukei[ i ].value = syoukei[ i ]; // 合計を表示
});
});
});
```
ご指摘通りに変更したのですが、動きませんでした…
どの部分が足りないのでしょうか…
度々申し訳ございません。

[shiuri]

ごめんなさい、Javascriptが貼り付けできると思っていました。
元の質問に追記します。

Answer 2

HTML側をいじる案なので実現可能性は状況次第だと思いますが、私なら各金額入力欄に商品を特定できるカスタムデータ属性を付与します。
具体的には、商品１の金額入力欄であれば、以下の様に data-syoukeiを追加します。

<input type="text" class="price" size="7" value="440" data-syoukei="syoukei0">

data-syoukeiの値は商品の小計を入れるinputのname属性の値と同じです。
これを全てのinput.priceに付与して、以下のスクリプトを実行すると小計を積算できます。

// 金額入力欄をquerySelectorAllでまとめて取ってくる
let priceList = document.querySelectorAll('.price');
priceList.forEach( e => {
  // 各金額入力欄の対し、予めセットしている小計対象のname値を取得
  let targetSyoukeiClass = e.dataset.syoukei;
  // querySelectorで小計を加算するinputを特定
  let targetSyoukeiInput = document.querySelector(`input[name=${targetSyoukeiClass}]`);
  // 無事取得できたら、小計inputに金額を加算する
  if(targetSyoukeiInput){
    targetSyoukeiInput.value = Number(targetSyoukeiInput.value) + Number(e.value);
  }
});

codepenでのデモ
（デモのため各明細の金額は予め入れてあります）

この問題で大変なのは金額inputに対応する小計inputを紐づけることなので、その紐づけをカスタムデータ属性でやってしまおうということです。

Comments

[shiuri]

ご回答とデモの記載もありがとうございます。
動かしてみた結果、期待通りの動きをしたのですが、今回selectを動かしたときに実行されるようにしたかったため、
$(document).ready(function(){
$('select').change(function() {
を追記しました。
その結果select選択で加算されるようになったのですが、selectを0に戻す(inputは440のまま)→1にする(inputは880と記載される)というどんどん加算されるだけの動きになってしまいました。
そこで、一旦0にリセットすればいいだろうと考え、
targetSyoukeiInput.value = 0;
をifの前に追加しましたら、単品商品(商品1、商品2)はうまく動いたのですが、複数商品(商品3)は最後尾の値のみ反映されるようになってしまいました。
0にリセット→1つ目のdata-syoukei="syoukei0"の値を取得→0にリセット→2つ目
というループになってしまったんだろうと想像はつきますが、どうすればよろしかったのでしょうか。
現時点のscriptを本文に貼り付けしますので、恐縮ですがご確認いただけますと幸いです。
よろしくお願いいたします。

[hope_mucci]

計算の最初に小計欄を全部ゼロにすれば良いのではないでしょうか。
小計inputは全てsyoukeisクラスがついているようなので、
document.querySelectorAll('.syoukeis').forEach( e => {
e.value = 0;
});
codepen反映済みです。

[shiuri]

無事に解決いたしました。
本当にありがとうございました！