formの計算式を複数箇所で汎用的に使えるようにしたい。

お世話になります。閲覧ありがとうございます。

前提・実現したいこと

formの計算式を複数箇所で汎用的に使えるようにしたいです。

A欄(id="textForm1")＆B欄(id="textForm2)で1セットの入力欄があり、A欄に1～100の整数を入力してフォーカスを外すとA欄に入力された数値を100から引いた値をB欄に表示させる。
（入力値のバリデーションは、気にしなくて大丈夫です。）

この計算式を
A欄(id="textForm1")＆B欄(id="textForm2")
A欄(id="textForm3")＆B欄(id="textForm4")
A欄(id="textForm5")＆B欄(id="textForm6")…
と増えていった時に、jsに修正を加えなくて済む書き方をしたいです。

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

下記の様に書いたのですが、薄い知識しかなく、汎用的にする為の記述方法が分かりません。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4	<meta charset="UTF-8">
5	<title>Document</title>
6	<link rel="stylesheet" type="text/css" href="css/style.css">
7	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
8</head>
9<body>
10<form>
11	<table>
12		<thead>
13			<tr>
14				<th></th>
15				<th>A欄</th>
16				<th>B欄</th>
17			</tr>
18		</thead>
19		<tbody>
20			<tr>
21				<td>計算結果</td>
22				<td>
23					<input type="text" id="textForm1">
24				</td>
25				<td>
26					<input type="text" id="textForm2" readonly="reradonly" placeholder="100-A">
27				</td>
28			</tr>
29		</tbody>
30	</table>
31	<table>
32		<thead>
33			<tr>
34				<th></th>
35				<th>A欄</th>
36				<th>B欄</th>
37			</tr>
38		</thead>
39		<tbody>
40			<tr>
41				<td>計算結果</td>
42				<td>
43					<input type="text" id="textForm3">
44				</td>
45				<td>
46					<input type="text" id="textForm4" readonly="reradonly" placeholder="100-A">
47				</td>
48			</tr>
49		</tbody>
50	</table>
51	<script type="text/javascript" src="js/sample.js"></script>
52</form>
53</body>
54</html>

js
1$('input').blur(function(){
2	if((this.value !='')&&(this.value <= 100)){
3
4		//入力フォームの値を取得
5		var answer = document.getElementById("textForm1").value;
6
7		//100から入力値を引く
8		var sum = 100 - parseInt(answer,10);
9
10		var resultForm = document.getElementById("textForm2");
11		resultForm.value = sum;
12
13	}
14});

どなたかご教示いただけますと幸いです。
どうぞよろしくお願いいたしますｍｍ

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

回答1件

ベストアンサー

せっかくjQuery利用しているのだから、jQueryの機能使いましょう。
ひとまずA欄には共通のclassを設定しておくこと。
なぜかというと

A欄に1～100の整数を入力してフォーカスを外すとA欄に入力された数値を100から引いた値をB欄に表示させる。

という要件だとB蘭の入力が発生しません。
現在のコードだと全てのinputに対してblurが発生するため、
わざわざそれぞれの情報を個別にID指定でとってこなきゃいけなくなっています。

今回は「隣のTDのinput」というのが決まっているので、
classを指定した上で、その親であるtdの次のtdにあるinput…という風に辿ってみます。

※ちょっとhtml簡略化しました。

html
1    <table>
2        <thead>
3            <tr>
4                <th></th>
5                <th>A欄</th>
6                <th>B欄</th>
7            </tr>
8        </thead>
9        <tbody>
10            <tr>
11                <td>計算結果</td>
12                <td>
13                    <input type="text" class="calc" id="textForm1">
14                </td>
15                <td>
16                    <input type="text" id="textForm2" readonly="reradonly" placeholder="100-A">
17                </td>
18            </tr>
19            <tr>
20                <td>計算結果</td>
21                <td>
22                    <input type="text" class="calc" id="textForm3">
23                </td>
24                <td>
25                    <input type="text" id="textForm4" readonly="reradonly" placeholder="100-A">
26                </td>
27            </tr>
28        </tbody>
29    </table>
30

js
1    $(function(){
2       $('.calc').on('blur',function(){
3            if($(this).val() != ''){
4                $(this).parent().next().children('input').val(100 - (parseInt($(this).val())));
5            }
6       });
7    });

もう少し簡略化できそうには思いますが、方向性としてはこんな感じで。

補足：
HTMLが割と画一的であるために辿り方が容易ですが、
煩雑化してくると、もう少し明示的に付けた方がいいかもしれません。
また、下記蛇足にあるようなIDにしておくとIDから数字部分のみ取得して、
そこから「次」とすることもできます。

蛇足：
IDは、ご存知かもしれませんが、1ページに1つのみというのがルールで、特別な意味を持ちます。
textform1・・・というのだとそれこそ汎用性に欠けたネーミングになっています。
連番ではなくある程度意味を持たせた名前の方がより役割がはっきりします。

例）
A欄：　calc1,calc2 ...
B欄：　result1,result2 ...
（このネーミングが良いかというより「入力」と「結果」を分かりやすくした、という感じで）

上記ネーミングルールで対となる要素の取得

js
1
2$('#result'+$(this).attr('id').replace('calc','')).val();
3

投稿2018/04/23 23:30

編集2018/04/23 23:37

m.ts10806

総合スコア80850

kalpi

2018/04/24 11:18

回答ありがとうございました！説明、とても分かりやすかったです。参照リンクまでありがとうございますｍｍ inputまでを辿る方法と、IDから数字部分を取得する方法、どちらも試して上手く実装できました。 IDの命名はおっしゃる通りだと思いますので、意味を持たせたものにリネームしました。また、実コードはもう少し煩雑なので、IDから数字部分を取得する方法で実装しました。大変勉強になりました。ありがとうございました！！ｍｍ