【JavaScript】正しいIDを入力したときだけ処理したいのにif文が常に実行される原因と対処法
原因:代入演算子(=)と比較演算子(== / ===)の混同
if文の条件式に等号演算子(=)を使ってしまうと、それは「比較」ではなく「代入」として評価されるため、ifブロックが常に実行されてしまいます。
値を比較するには、==(緩い等価)または ===(厳密等価)を使用してください。特にJavaScriptでは、意図しない型変換を防ぐために === の使用が推奨されています。
コード例
以下は、オブジェクトの配列から指定したIDを持つ要素を検索するサンプルコードです。
var details = [
{
id: 10001,
name: "John"
},
{
id: 10002,
name: "Bob"
},
{
id: 10003,
name: "Carol"
},
{
id: 10004,
name: "David"
}
]
var searchId = 10003;
for (var index = 0; index < details.length; index++) {
if (details[index].id === searchId) {
console.log(details[index].id + " found");
break;
}
}実行方法
上記のプログラムを実行するには、ターミナルで以下のコマンドを使用します。
node fileName.js
ここでは、ファイル名を demo322.js としています。
実行結果
プログラムを実行すると、次のような出力が得られます。
PS C:\Users\Amit\javascript-code> node demo322.js 10003 found
このように、条件式で === を使うことで、searchId と一致するIDが見つかったときだけifブロック内の処理が実行され、該当する要素が見つかった時点でループを抜けられます。
-
【JavaScript】Enterキー押下時に<input type="time">のデフォルト動作を無効化する方法
<input type=time> にフォーカスがある状態で Enterキー を押すと、ブラウザによってはフォーム送信やフォーカス移動などのデフォルト動作が発生することがあります。これを防ぐには、keydown イベントを監視し、preventDefault() を呼び出してデフォルトの挙動をキャンセルします。 実装手順 以下の手順で実装できます。 対象のinput要素に対して addEventListener(keydown, ...) でイベントリスナーを登録する。 イベントハンドラ内で event.key === Enter を判定する。 Enterキーが押された場合に e
-
【JavaScript】入力フィールドに文字が入力されたらボタンの色を変更する方法
Webフォームを作成していると、「テキスト入力欄に何かが入力されたら、ボタンの色を変えてユーザーに視覚的なフィードバックを与えたい」というケースはよくあります。本記事では、JavaScriptのonkeyupイベントとgetElementByIdを使って、この動作をシンプルに実装する方法を解説します。 実装のポイント 今回の仕組みは非常にシンプルです。入力フィールドにonkeyupイベントを設定し、キーが押されるたびに入力値をチェックします。値が空でなければボタンの背景色を緑に、空なら元の水色に戻すという処理を行います。 1. ボタンの準備 まず、色を変更対象となるボタンを用意します。初期状態