select を使った採点コンテンツ[ value の値を取得 ]

select に割り振られた「数値を取得して合算する」

テストの自己採点や、病気症状のセルフチェックに使用できる。

動作部分は JQuery ではなく Javascript で構成

WordPress の投稿内に組み込む時は、HTMLの文末に<script></script>タグを作り、その中に JavaScript のコードをコピペして、ブロックエディタの「カスタムHTML」に張り付ける

See the Pen Untitled by ぼぶ@朝活input中 (@bobu_6326) on CodePen.

解説

HTML

• <tr>毎に一つの質問になっている
• 質問ごとの<select>に name と value が割り振られている
• <select> の値を変更すると onChange で function”keisan()” が実行される
• <option>に選択肢を入力、value=” “に数値を設定

JavaScript

• <select> の値が変わると onChange属性により function”keisan()”が実行される
• 各質問ごとに 関数price に value の点数を取得
• perseInt でStr属性(文字)の値をInt属性(数字)に変更し、合計を関数total に取得
• 関数total を name属性field_total の value に挿入