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 に挿入
