- コードを表示
- スクリプトの
常時実行:OFF - サンドボックス
で作り続ける - プレビューを
全画面で表示
×
おみくじ
×
➡ ➡ ➡
目標
右の動画のようにボタンを押すとおみくじの結果が出てくるプログラミングを作成してみよう。
次のページからはヒントなので自信のある人はヒントを見ないでやってみよう!

ボタンと表示する場所の作成
まずはボタンを作ってボタンのなかにテキストを入力するのと、id属性を設定しましょう。それができたら<div>を用いて結果を表示する場所を作りましょう。
この<div>要素の中身を書き換えることで結果を表示したいのでこの<div>要素にもidを設定しましょう。
DOM操作
「id=" "の要素」ブロック、「要素~の文章」ブロック、「~にイベント~が発生したとき」ブロック、「~に~を代入」ブロックを用いてDOM操作をしましょう。
乱数の作り方
おみくじなのでどんな結果が出るのかはランダムで決まってほしいです。そこで変数に1未満のランダムな数を代入してその値によって条件分岐するようにしましょう。1未満のランダムな数を生成するには数式フォルダにある「1未満の正の乱数」ブロックを使いましょう。例えば変数の値が1~0.80のときに大吉と表示するようにすれば大吉は20%の確率で表示されるようになります。
条件分岐
条件分岐はボタンがクリックされると行われます。なので乱数の生成をどこで行うのかに注意しながらブロックを配置しましょう。
例えばおみくじの結果によって文字の色や大きさが変わるようにしてみたり、おみくじの結果を増やしてみたり、一度に複数の結果を表示したりしてみましょう。
発展>