【html・js】form内の２つのinputをそれぞれ初期化するボタンを作成したい

実現したいこと

htmlとJavaScript(jquery含む)の勉強中です。
form内のinputを個別に初期化するボタンを作成したいのですがうまくいきません。
どうしてもform全体を初期化する動きになってしまいます。
どのようにスクリプトを記述したらよいでしょうか？
jqueryを利用した解決方法でも構いません。よろしくお願いします。

該当のソースコード

Html、JavaScript
1<!DOCTYPE html>
2<html lang="en" dir="ltr">
3	<head>
4		<meta charset="utf-8">
5		<title></title>
6	</head>
7	<body>
8
9		<h2>フォーム初期化</h2>
10
11		<form>
12			<p>
13				input１
14				<input id="text1" type="text" value="テキスト１の初期値" class="form-control">
15			</p>
16			<p>
17				input２
18				<input id="text2" type="text" value="テキスト２の初期値" class="form-control">
19			</p>
20			<p>
21				<button type="reset" onclick="init_action();">input1を初期化</button>
22				<button type="reset" onclick="init_action();">input2を初期化</button>
23			</p>
24		</form>
25	</body>
26
27	<script type="text/javascript">
28		function init_action(){
29			//ここに何を記述????
30		}
31	</script>
32</html>
33

m.ts10806

2023/08/06 21:15

１年近く放置された状態で何の音沙汰もなく急に解決とされましたが、その後どうなって解決と至ったのでしょうか。可能な範囲で回答にコメントでフィードバックください。

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

回答2件

javascript
1<script>
2document.addEventListener('click', e=>{
3  const t=e.target;
4  if(t.matches('[data-target]')){
5    const target=document.querySelector(t.dataset.target);
6    target.value=target.getAttribute('value');
7  }  
8});
9</script>
10
11<form>
12<p>
13input１
14<input id="text1" type="text" value="テキスト１の初期値" class="form-control">
15</p>
16<p>
17input２
18<input id="text2" type="text" value="テキスト２の初期値" class="form-control">
19</p>
20<p>
21<button type="button" data-target="#text1">input1を初期化</button>
22<button type="button" data-target="#text2">input2を初期化</button>
23</p>
24</form>

投稿2022/09/14 09:03

yambejp

総合スコア114779

yambejp

2022/09/14 09:04

あら、ほとんどm.ts10806さんと被ってますね

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

ベストアンサー

そもそもtype=resetの時点で所属するフォーム内の入力コントロールをクリアするので、
type=buttonとかに変更しといたほうが良いです。

それらを踏まえてパッと思いつくのは以下2パターン
・引数に識別子を与えて識別子を元にクリア処理
・data属性で対象ID設置してその属性値を元にクリア処理

いずれも「法則を見つける」「なければ法則を自分で作る」ことです。

後者の例（実装イメージ。未検証です。）

HTML
1<button type="button" class="clearbtn" data-target="#text1">input1を初期化</button>
2<button type="button" class="clearbtn" data-target="#text2">input2を初期化</button>

JavaScript
1$(function(){
2   $(document).on('click','.clearbtn',function(e){
3        const target = $(e.currentTarget).data('target');
4        $(target).val('');
5   })
6})
7