JavaScriptで整数値が偶数か奇数かを判定する方法

この記事では、JavaScriptで整数値が偶数か奇数かを判定する方法について見ていきたいと思います。

ステップ１：HTMLで入力、ボタン、結果出力用の要素を作成

まずは、HTMLで数字入力のための<input>要素や出力のための<p>要素を作成していきます。

<p>整数値を入力してください。</p>
<input type="text" id="text">
<input type="button" id="button" value="判定">
<p id="result"></p>

次にJavaScriptを作成していきます。

ステップ２：ステップ１のHTML要素をJavaScriptで取得

ステップ１で作成したHTML要素をJavaScriptで取得し、変数に代入します。

let result = document.getElementById("result");
let text = document.getElementById("text");
let button = document.getElementById("button");
let number;

ここで用いているgetElementById()は、HTMLの要素をid名をキーとして取得するために用いるメソッドです。詳しくは以下の記事で参照いただくことができます。
JavaScriptのgetElementById()の使い方

※最終行の「number」は、あとで使うので変数の宣言だけしておきます。

ステップ３：If文を用いて条件分岐を作成

if文を用いて値に何も入力されていなかったり整数以外が入力された場合、偶数が入力された場合、奇数が入力された場合の処理を作成します。

number = text.value - 0;
if(text.value === "") {
  result.textContent = "";
} else if(!Number.isInteger(number)) {
  result.textContent = "";
} else if(number % 2 === 0) {
  result.textContent = "入力された数字は偶数です。";
} else {
  result.textContent = "入力された数字は奇数です。";
}

If文については以下の記事を参照していただくことができます。
JavaScriptでif文を用いて条件分岐をする方法

説明

・１行目で「text.value – 0」としていますが、これにより文字列型である「text.value」が数値型に変換されます。

・２行目のif文の中では、「text.value」が空欄である場合は何も表示されないように指定します。

・４行目のelse-if文の中では、入力した値が整数ではない場合は何も出力されないようにします。
ここで用いている「Number.isInteger()」は、引数に指定した値が整数かどうかを真偽値で返すメソッドです。
また、先頭に「!」を付けると、指定した条件が真ではない場合という意味をもたせることができます。

・６行目のelse-if文の中では、数値を2で割った余りが0、つまり偶数の場合は「入力された数字は偶数です。」と表示されるようにします。

・８行目のelse文では、上記以外、つまり入力された値が奇数の場合は「入力された数字は奇数です。」と表示されるようにします。

ステップ４：addEventListener()でクリック時のイベントを作成

button.addEventListener("click", () => {
  ステップ３のIf文
});

addEventListener()でクリックイベントが発生した際に処理を発動させるようにします。

addEventListener()については、以下の記事で参照していただけます。
JavaScriptでクリック時に処理を発動させる方法

完成形

上記のコードをまとめて完成させます。

・HTML

<p>整数値を入力してください。</p>
<input type="text" id="text">
<input type="button" id="button" value="判定">
<p id="result"></p>

・JavaScript

let result = document.getElementById("result");
let text = document.getElementById("text");
let button = document.getElementById("button");
let number;

button.addEventListener("click", () => {
  number = text.value - 0;
  if(text.value === "") {
    result.textContent = "";
  } else if(!Number.isInteger(number)) {
    result.textContent = "";
  } else if(number % 2 === 0) {
    result.textContent = "入力された数字は偶数です。";
  } else {
    result.textContent = "入力された数字は奇数です。";
  }
});

では、実際に確かめてみましょう。
下の入力欄に整数値を入れてボタンをクリックしてみてください。

ちゃんと、整数値のときのみ偶数か奇数かの判定がされていますね。

まとめ

このように、if文を用いて2で割った余りの値で条件分岐をさせることで指定した数値が偶数か奇数かを判定することができます。