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

HTML DOM Input Week の value プロパティの使い方を解説

Input Week の value プロパティとは

HTML DOM の Input Week value プロパティは、<input type="week"> で作成された入力フィールドの value 属性が定義されている場合に、その値を文字列として返します。さらに、このプロパティに新しい文字列を代入することで、週の値を動的に変更することも可能です。

value の値は「YYYY-Www」という形式（例：2021-W35）で表され、年と、その年の何週目にあたるかを組み合わせた文字列になります。

構文

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

値を取得する（文字列を返す）

inputWeekObject.value

値を設定する（文字列を代入する）

inputWeekObject.value = '文字列'

サンプルコード

ここでは、Input Week value プロパティを使って「試験週」を変更する例を紹介します。ボタンをクリックすると、試験週が 2021-W35 から 2021-W36 に更新されます。

<!DOCTYPE html>
<html>
<head>
<title>Input Week 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>Week-value</legend>
<label for="WeekSelect">Examination Week:
<input type="week" id="WeekSelect" value="2021-W35">
</label>
<input type="button" onclick="updateValue()" value="Postpone Examinations">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
   var divDisplay = document.getElementById("divDisplay");
   var inputWeek = document.getElementById("WeekSelect");
   function updateValue() {
      inputWeek.value = '2021-W36';
      divDisplay.textContent = 'New Examination Week: '+inputWeek.value.split('-W')[1]+' ,'+inputWeek.value.split('-W')[0];
   }
</script>
</body>
</html>

コードの解説

このサンプルでは、以下の処理が行われています。

  • type="week" の入力フィールドに、初期値として「2021-W35」を設定しています。
  • 「Postpone Examinations（試験を延期する）」ボタンがクリックされると、updateValue() 関数が呼び出されます。
  • 関数内では、value プロパティに「2021-W36」を代入し、週の値を更新します。
  • split('-W') メソッドで文字列を分割し、週番号と年を取り出して画面に表示しています。

実行結果

このコードを実行すると、次のような画面が表示されます。

「Postpone Examinations」ボタンをクリックする前：

HTML DOM Input Week の value プロパティの使い方を解説

「Postpone Examinations」ボタンをクリックした後：

HTML DOM Input Week の value プロパティの使い方を解説

ボタンをクリックすると、入力フィールドの値が「2021-W35」から「2021-W36」に変更され、「New Examination Week: 36, 2021」というテキストが画面に表示されます。

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

    HTML DOM Input Week form プロパティとはHTML DOM の Input Week form プロパティは、<input type=week> 要素が含まれている親フォーム（enclosing form）への参照を返します。このプロパティを使うことで、JavaScript から入力フィールドがどのフォームに属しているかを取得し、フォームの ID やその他のプロパティにアクセスすることができます。構文（シンタックス）form オブジェクトへの参照を返す場合の構文は以下の通りです。inputWeekObject.form使用例それでは、Input Week fo

  2. HTML DOM Input Week disabled プロパティの使い方をわかりやすく解説

    HTML DOM の Input Week disabled プロパティは、週入力フィールド（<input type=week>）が有効（enabled）か無効（disabled）かを設定・取得するためのプロパティです。フォームの入力欄を一時的に操作できない状態にしたり、条件に応じて入力を受け付けられるように切り替えたりする際に活用できます。 構文 基本的な構文は以下のとおりです。 ブール値（true / false）を取得する場合 inputWeekObject.disabled disabled にブール値を設定する場合 inputWeekObject.disabled