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

HTML DOM Input Time の value プロパティとは？取得・設定方法を解説

HTML DOM の Input Time の value プロパティは、<input type="time"> 要素の value 属性に設定されている値を文字列として返します。さらに、このプロパティに新しい文字列を代入することで、時刻の値を後から設定（変更）することも可能です。

なお、value プロパティで扱われる時刻は「HH:MM」（24時間表記）形式の文字列である点に注意してください。

構文

value プロパティの基本構文は以下のとおりです。

値を取得する場合

inputTimeObject.value

値を設定する場合

inputTimeObject.value = '文字列'

サンプルコード

それでは、Input Time の value プロパティを使った具体的な例を見てみましょう。次のデモでは、ユーザーが入力した時刻が正解（18:30）と一致しているかどうかを判定し、その結果を画面に表示します。

<!DOCTYPE html>
<html>
<head>
<title>Input Time value</title>
<style>
    form {
        width:70%;
        margin: 0 auto;
        text-align: center;
    }
    * {
        padding: 2px;
        margin:5px;
    }
    input[type="button"] {
        border-radius: 10px;
    }
</style>
</head>
<body>
<form>
<fieldset>
<legend>時刻当てクイズ</legend>
<label for="TimeSelect">時刻：</label>
<input type="time" id="TimeSelect" value="00:00">
<input type="button" onclick="checkForGuess()" value="回答する">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var inputTime = document.getElementById("TimeSelect");
    divDisplay.textContent = 'イベントは何時から始まるでしょうか？';
    function checkForGuess() {
        if (inputTime.value === '18:30')
            divDisplay.textContent = '正解です！イベントは ' + inputTime.value + ' に始まります。';
        else
            divDisplay.textContent = '残念ながら不正解です。もう一度挑戦してみましょう。';
    }
</script>
</body>
</html>

実行結果

上記のコードを実行すると、以下のような出力が得られます。

誤った時刻を入力して「回答する」ボタンをクリックした場合：

HTML DOM Input Time の value プロパティとは？取得・設定方法を解説

正しい時刻（18:30）を入力して「回答する」ボタンをクリックした場合：

HTML DOM Input Time の value プロパティとは？取得・設定方法を解説

  1. HTML DOM Input Time の type プロパティとは？使い方とサンプルコードを解説

    HTML DOM の Input Time type プロパティは、<input type=time> 要素の type 属性の値を取得または設定するために使用されます。このプロパティを使うことで、JavaScript から動的に入力フィールドの種類を確認したり変更したりすることができます。 構文 type プロパティの基本的な構文は以下の通りです。 type の値を取得する場合 inputTimeObject.type type に値を設定する場合 inputTimeObject.type = stringValue 指定できる文字列値（stringValue） stri

  2. HTML DOM Input Timeのstepプロパティの使い方を解説

    HTML DOMのInput Time stepプロパティは、時刻入力フィールド（<input type=time>）における「秒」の有効な間隔（ステップ値）を設定・取得するためのプロパティです。このプロパティを利用することで、ユーザーが選択できる秒の値を一定の間隔に制限できます。構文stepプロパティの構文は以下のとおりです。値を取得する場合inputTimeObject.step値を設定する場合inputTimeObject.step = numberパラメータ設定できるnumber値の条件は以下のとおりです。seconds（秒）60を割り切れる数値である必要があります（例：1