入力フォーム3つ入力したらスクリプトを発火する処理を教えてください。

前提・実現したいこと

入力フォーム3つ入力したらスクリプトを発火する処理を行いたいです。

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

入力フォーム1つの場合は、change イベントを使用して対応できたのですが、
入力フォーム3つ入力したらスクリプトを発火するというスクリプトの記述がわかりません。

該当のソースコード

入力フォーム1つの場合
●html
<input size="20" type="text" name="name-form" onblur="blurFunction()" id="name-form"/><p class="check" style="display: none;"><span class="chk"></span></p>

●javascript
var name_form = document.getElementById("name-form");
name_form.addEventListener("change",function(){
$('#name p.check').css('display', 'inline-block');
});

試したこと

入力フォーム1つの場合のように考えてみたんですけど、3つ入力時にスクリプトを発火することができませんでした。

退会済みユーザー

2021/12/29 21:12

質問者さん、無言ですが、回答したのでそれに対するフィードバックを書きましょう。役に立った/立たなかったぐらいはすぐ返せるのでは？　役に立たなかったならどこがダメだったかを書くと、より期待に近い回答が出てくるかも。とにかく無言は NG です。

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

回答3件

ベストアンサー

３個といわず何個でも。

js
1<!DOCTYPE html>
2<meta charset="utf-8">
3<title></title>
4<style>
5  input:invalid {
6    border: 1px red solid;
7  }
8</style>
9
10
11<body>
12<form id="hoge">
13  <p>2桁の数値を入力してください
14  <ul>
15    <li><input type="text" name="fuga0" pattern="^\d{2}$" required>
16    <li><input type="text" name="fuga1" pattern="^\d{2}$" required>
17    <li><input type="text" name="fuga2" pattern="^\d{2}$" required>
18  </ul>
19</form>
20
21
22<script>
23
24class A {
25  constructor ([...elements], callBackFunc) {
26    this.es = elements;
27    this.cbFunc = callBackFunc;
28  }
29
30  fire () { this.cbFunc (); }
31  check () { !this.es.every (e=> e.checkValidity ()) || this.fire (); }
32  handleEvent (event) { !this.es.includes (event.target) || this.check (); }
33
34  static create (elements, eventType, callBackFunc, useCapture = false) {
35    let that = new this ([...elements], callBackFunc);
36    elements[0].form.addEventListener (eventType, that, useCapture);
37    return that;
38  }
39}
40
41//___________
42
43//呼び出したい関数
44function ok () {
45  alert ('成立です');
46}
47
48//対象となる要素
49let es = document.querySelectorAll ('input[name^="fuga"]');
50
51A.create (es, 'change', ok);
52
53
54
55</script>