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

JavaScriptのprompt()で入力した値を条件式で評価する方法

prompt()で入力した値をJavaScriptの条件式で評価する

JavaScriptでは、prompt()メソッドを使ってユーザーから値を入力してもらい、その値を条件式（if文）で評価することができます。この記事では、2つの数値を入力して掛け算した結果を条件判定する具体例を解説します。

ポイントは、parseInt()を使って入力された文字列を数値に変換している点です。prompt()の戻り値は常に文字列のため、そのまま計算すると意図しない結果になる可能性があります。

var firstvalue = parseInt(prompt("Enter the value1"));
var secondvalue = parseInt(prompt("Enter the value2"));

サンプルコード

以下が完全なコード例です。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<body>
</body>
<script>
    var firstvalue = parseInt(prompt("Enter the value1"));
    var secondvalue = parseInt(prompt("Enter the value2"));
    if (firstvalue * secondvalue > 50)
       document.write("<h1>Result is correct</h1>");
    else
       document.write("<h1>Result is not correct</h1>");
</script>
</html>

実行手順

上記のプログラムを実行するには、ファイル名を「anyName.html」（またはindex.html）として保存します。その後、VS Codeエディタでファイルを右クリックし、「Open with Live Server」を選択してブラウザで開いてください。

実行結果と動作の流れ

実行すると、まず最初の値の入力を求められます。ここでは「10」と入力します。

JavaScriptのprompt()で入力した値を条件式で評価する方法

JavaScriptのprompt()で入力した値を条件式で評価する方法

OKボタンをクリックすると、続けて2つ目の値の入力画面が表示されます。こちらも「10」と入力します。

JavaScriptのprompt()で入力した値を条件式で評価する方法

JavaScriptのprompt()で入力した値を条件式で評価する方法

OKボタンをクリックすると条件判定が行われ、結果が画面に出力されます。

JavaScriptのprompt()で入力した値を条件式で評価する方法

処理内容のまとめ

このサンプルでは、入力された2つの値を掛け合わせた結果が50より大きいかどうかをif〜else文で判定しています。今回の例では 10 × 10 = 100 となり50より大きいため、「Result is correct」が表示されます。もし積が50以下であれば、「Result is not correct」が出力される仕組みです。


  1. 【JavaScript】Enterキーが押されたかどうかを判定してコンソールに結果を表示する方法

    onkeypressイベントでEnterキーの押下を検出するEnterキーが押されたかどうかを判定し、その結果をコンソールに出力するには、onkeypressイベントを使用します。まず、テキスト入力ボックスを作成してみましょう。<input id="textBox" type="text" onkeypress="return demoForEnterKey(event)"/>続いて、demoForEnterKey()関数の実装方法を見ていきましょう。Enterキーが押されたかどうかは、イベントオブジェクトのkeyCode

  2. JavaScriptでinnerHTMLを設定する方法をわかりやすく解説

    JavaScriptでHTML要素の内容を動的に書き換えたい場合に便利なのが、innerHTMLプロパティです。innerHTMLを使えば、指定した要素の中にHTML文字列をそのまま挿入・置き換えることができます。本記事では、innerHTMLを設定する正しい構文と、実際に動作するサンプルコードを初心者向けに解説します。 innerHTMLを設定する正しい構文 innerHTMLを設定する際の正しい構文は以下のとおりです。 document.getElementById(yourIdName).innerHTML=yourValue; この構文では、まずgetElementById()メソッド