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 に挿入
javascript.logo

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!

この記事を書いた人

bobuのアバター bobu Webクリエイター

ホームページ制作、リメイク、バナー、画像制作を行っています。
毎朝5:00-7:00 まで朝活で ITの知識を インプット+ Twitter へアウトプット。
お仕事のご依頼は「お問い合わせページ」からご連絡ください。