問題

6
jQuery

入力された値を小さい順に並べよう!

jQueryの問題に挑戦しよう!

問題

入力された値を小さい順に並べよう!

今回は数値の並べ替えをしましょう!
デモのように昇順で入力された三つの値を並べ替えてください。

あらかじめエディタに書くコード

                    <input type="number" id="1" placeholder="ここに数字を入力">
<input type="number" id="2" placeholder="ここに数字を入力">
<input type="number" id="3" placeholder="ここに数字を入力">
<button>入力完了</button>
<p>昇順で並べます</p>
<div class="box"></div>
¥HTML¥
                

期待する画面

解答と解説(入力された値を小さい順に並べよう!)

解説

LINE登録して解答を見る

※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます

まずボタンがクリックされることをトリガーにします。そしてinputにそれぞれidが指定されているのでそのvalueをそれぞれ変数に代入します。その変数を前から配列に代入してそれを最後に並び替え、それをboxで表示するという流れです。今回の肝となるのは並べ替えの部分だと思います。for文を2個使って総当たりするようにしています。そして大きいものを後ろに小さいものを前にくるように変数saveを使って一時的に数値を保存しその空いたところに入れ替わる数値を代入しています。そしてsaveによって保存されていた数値をもう一方に代入しています。

さらにスキルアップしたい方は公式LINEから「jQuery」と送信すると動画が見れます。

LINE登録して動画を視聴する
学習の事・キャリアの事、何でもOK!無料相談に申し込む