JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

【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ブロック内の処理が実行され、該当する要素が見つかった時点でループを抜けられます。

  1. 【JavaScript】Enterキー押下時に<input type="time">のデフォルト動作を無効化する方法

    <input type=time> にフォーカスがある状態で Enterキー を押すと、ブラウザによってはフォーム送信やフォーカス移動などのデフォルト動作が発生することがあります。これを防ぐには、keydown イベントを監視し、preventDefault() を呼び出してデフォルトの挙動をキャンセルします。 実装手順 以下の手順で実装できます。 対象のinput要素に対して addEventListener(keydown, ...) でイベントリスナーを登録する。 イベントハンドラ内で event.key === Enter を判定する。 Enterキーが押された場合に e

  2. 【JavaScript】入力フィールドに文字が入力されたらボタンの色を変更する方法

    Webフォームを作成していると、「テキスト入力欄に何かが入力されたら、ボタンの色を変えてユーザーに視覚的なフィードバックを与えたい」というケースはよくあります。本記事では、JavaScriptのonkeyupイベントとgetElementByIdを使って、この動作をシンプルに実装する方法を解説します。 実装のポイント 今回の仕組みは非常にシンプルです。入力フィールドにonkeyupイベントを設定し、キーが押されるたびに入力値をチェックします。値が空でなければボタンの背景色を緑に、空なら元の水色に戻すという処理を行います。 1. ボタンの準備 まず、色を変更対象となるボタンを用意します。初期状態