また知りもしないJavaScriptのTips。
本当はjQueryでも使ってアニメーションっぽくしたかったけど、時間もなかったのでこれで。
アニメーション無しでいいなら、この方法でいけます。
解説を加えるまでもない気もするけど、一応。
最初の質問「寿司は好きですか？」の解答によって、その下に表記される内容が変わります。
「キライ！」にチェックがあると、<div id="skip">の内容が、
「スキ！」にチェックがあると、<div id="extra">の内容が表示されます。
もちろん、ページリロードの必要はありません。ラジオボタンのチェック場所が変わるたびに、内容も変更されます。
その他、細々としたところ。
L.10のradio[0].checkedの「0」は、『1つめの選択肢にチェックが入っている』ということなので、HTML中の<input ~ value="x">の「x」の数字は一切関係ありません。好きな文字数字で大丈夫です。
L.19の記述は魔法の呪文らしいです。無いと困るらしい。
L.31やL.36の記述は、「id」である必要があるみたいです。「class」は使えないので、この手の設問を複数行いたい場合は、idを複数振ってあげる必要があります。script内のfunctionも書き加える必要がありそうです。
以上。今度はjQueryでアニメーションできるといいなあ。
参考
