disabled プロパティが表示されない原因が分からない

Q&A掲示板を作成していて名前とメッセージが送信可能条件を満たしていない場合、ボタンの色を変更させたいと考えております。
disabled プロパティで色の変化を付けており以前は表示されていたのですが、コードを変更したところ表示されなくなってしまいました。
アドバイスお願い致します。

※表示されていたころのコード
<div class="post-button"><!-- ボタンを押せなくする -->
<button type="submit" id="submit_button" name="mode" value="confirm">表示画面へ進む</button>
</div>
<script>
function validation_submit(f) {
const submit = document.getElementById("submit_button");
/* 判定は逆なので、逆に渡す */
submit.disabled = f ? false : true;
};
function validation_text(parts) {
/* このpartsグループの、inputを抽出 */
let text = parts.getElementsByClassName('input')[0];
/* 最小チェック */
if (text.value.length == 0) {
return false;
}
/* 最大チェック */
if (text.value.length >= text.dataset.length) {
return false;
}
return true;
};
/* バリデーション条件判断部分 */
function validation() {
let parts = document.getElementsByClassName('parts');
let submit = true;
for (let i = 0; i < parts.length; i++) {
if (validation_text(parts[i]) != true) {
submit = false;
}
}
validation_submit(submit);
};
/* 文字数表示 */
document.addEventListener('input', e => {
if (!['name', 'message'].includes(e.target.id)) return;
const
t = e.target,
m = t.nextElementSibling,
n = t.value.length - (t.dataset.length | 0),
c = document.createElement('span');
c.append(Math.abs(n));
m.style.color = n > 0 ? 'red' : 'black';
m.replaceChildren(n > 0 ? '' : '残り', c,
`文字${n > 0 ? '超過してい' : '入力でき'}ます。`);
/* 毎回判定によるボタン制御 */
validation();
});
/* 初回判定のボタン制御 */
validation();
};
document.addEventListener("DOMContentLoaded", init);
</script>


※表示されなくなってしまったコード
<div class="post-button"><!-- ボタンを押せなくする -->
<button type="button" id="input_button" name="mode" value="confirm">確認画面へ進む</button>
</div>
<!-- type、name、id、valueの順番 -->
<script>
function validation_submit(f) {
const submit = document.getElementById("input_button");
/* 判定は逆なので、逆に渡す */
submit.disabled = f ? false : true;
};

function validation_text(parts) {
/* このpartsグループの、inputを抽出 */
let text = parts.getElementsByClassName('input')[0];
/* 最小チェック */
if (text.value.length == 0) {
return false;
}
/* 最大チェック */
if (text.value.length >= text.dataset.length) {
return false;
}
return true;
};
/* バリデーション条件判断部分 */
function validation() {
let parts = document.getElementsByClassName('parts');
let submit = true;
for (let i = 0; i < parts.length; i++) {
if (validation_text(parts[i]) != true) {
submit = false;
}
}
validation_submit(submit);
};
const init = function () {
set_attach_event();
document.getElementById("input_button").addEventListener("click", input_button_click);
/* 文字数表示 */
document.addEventListener('input', e => {
if (!['name', 'message'].includes(e.target.id)) return;
const
t = e.target,
m = t.nextElementSibling,
n = t.value.length - (t.dataset.length | 0),
c = document.createElement('span');
c.append(Math.abs(n));
m.style.color = n > 0 ? 'red' : 'black';
m.replaceChildren(n > 0 ? '' : '残り', c,
`文字${n > 0 ? '超過してい' : '入力でき'}ます。`);
/* 毎回判定によるボタン制御 */
validation();
});
/* 初回判定のボタン制御 */
validation();
};//const init = function () の終了
}; //const set_attach_event = function () の終了
//DOM構築、スタイルシート、画像、サブフレームの読み込みが完了した後に発生する
window.addEventListener("DOMContentLoaded", init);
</script>

No.2 ベストアンサー 回答者： fujillin 回答日時： 2024/02/11 00:13

No1です。

＞※エラー文
＞Uncaught ReferenceError: init is not defined
どこで発生しているのか、記載がありませんが、ご提示のスクリプトの中であれば
＞window.addEventListener("DOMContentLoaded", init);
で発生しているものと推測します。

仮にそうだとして、その直前に、
＞}; //const set_attach_event = function () の終了
とありますが、ご提示のスクリプトには、この閉じカッコに対応するカッコがありません。

コメントから推測して、もしかすると、
　set_attach_event = function () {
　　　　・・・
　　　const init = function () { ・・・ }
　　　　・・・
　}
　window.addEventListener("DOMContentLoaded", init);
のような構成になっているのではないでしょうか？

そうであるなら・・・
最後の一文の実行時には、initは定義されていませんし、そもそもスコープとして参照外になっているものと推測します。
記載していない他の部分があるようなのでなんともわかりませんけれど、仮に実行して定義済みであったとしても、initはset_attach_event関数の内部スコープにあるので、そのセンテンスからは参照できないはずと思います。

その他の補足説明に関しては、ご質問文に何も記載がないものに関する内容と思われますので、質問者様にしかわからない内容になっています。
当方には推測のしようもありません。

この回答へのお礼

Q.コメントから推測して、もしかすると、
　set_attach_event = function () {
　　　　・・・
　　　const init = function () { ・・・ }
　　　　・・・
　}
　window.addEventListener("DOMContentLoaded", init);
のような構成になっているのではないでしょうか？

A.アドバイスありがとうございます、fujillin さんのおっしゃる通りでした。

Q.最後の一文の実行時には、initは定義されていませんし、そもそもスコープとして参照外になっているものと推測します。
記載していない他の部分があるようなのでなんともわかりませんけれど、仮に実行して定義済みであったとしても、initはset_attach_event関数の内部スコープにあるので、そのセンテンスからは参照できないはずと思います。

Q.説明ありがとうございます。下記のような構成に変更することでエラーを解決することが出来ました。
set_attach_event(); を const init = function () {} ないで出力することでカメラ画像をファイルアップロード時に非表示にするコードと名前とメッセージの入力可能な字数をカウントするコード両方に window.addEventListener("DOMContentLoaded", init); イベントを適応することができました。

　set_attach_event = function () {
　　　　・・・
　}
　const init = function () {
　set_attach_event();
　}
　window.addEventListener("DOMContentLoaded", init);

お礼日時：2024/02/13 15:53

No.1 回答者： fujillin 回答日時： 2024/02/10 22:25

こんばんは

ご提示の内容が全文なのか一部抜き出しなのか不明ですが、ご質問文に記載されていないものは無視してよいものとして・・
（HTMLの構成も不明ですが、そちらにも問題は無いものと仮定します）

なさりたいこともよくわからないし、実際の実行内容もよくわかりませんけれど、後半の「変えた」というる部分で、エラーが発生していると推測します。
ブラウザの開発者ツールなどで見て、エラーが出ていませんか？

ご提示のスクリプトの範囲内で見る限り、
　set_attach_event
　input_button_click
という関数が呼ばれているのにも関わらず、定義がありませんのでエラーが発生しているのではないかと考えられます。
「〇〇 is not defined」のエラーが出ているのではないかと。


なお、ご質問には関係ありませんけれど、スクリプトの構成がわかりにくく作られているので、ミスの入り込む余地が生まれやすいのではと想像します。
全体を整理することで、もっとスッキリすると思いますし、間違えも発生しにくくなるだろうと推測します。

この回答へのお礼

Q.ブラウザの開発者ツールなどで見て、エラーが出ていませんか？

A.回答ありがとうございます、エラーを確認したところ下記のように表示されております。
ソースコードを確認したところ init という変数は無いとのことですが const init = function () {} で定義しているため原因が不明です。
閉じタグの位置がおかしいのでしょうか…？

//DOM構築、スタイルシート、画像、サブフレームの読み込みが完了した後に発生する
window.addEventListener("DOMContentLoaded", init);

※エラー文
Uncaught ReferenceError: init is not defined

※サンプルサイト
https://www.irasuto.cfbx.jp/%e8%b3%aa%e5%95%8f%e …


Q.定義がありませんのでエラーが発生しているのではないかと考えられます。

A.回答ありがとうございます、カメラ画像をファイルアップロード時に非表示にするコードと名前とメッセージの入力可能な字数をカウントするコードを HTMLElement.innerHTML を使い書いた場合に
DOM要素が発生してしまうリスクがある為 window.addEventListener("DOMContentLoaded", init); でまとめる方法で考えております。
カメラ画像を非表示にするコードも機能していない為そちらに原因があるとは思うのですが、解決方法が分からず困っております。
アドバイスお願い致します。

※該当コード(bbs_quest_input.php)
https://wandbox.org/permlink/uNt2X9bLZw8EYwWQ

お礼日時：2024/02/10 23:27