ログイン
問題6

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

アイコン画像

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

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

エディターのアイコンあらかじめエディタに書くコード

                <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¥
              

ブラウザのアイコン期待する画面


タグアイコン解答ソースコード

              $(function () {
  $("button").click(function(){
    var num1 = $("#1").val(),
          num2 = $("#2").val(),
          num3 = $("#3").val(),
          numbers=[num1,num2,num3],
          numberLength = $('input[type="number"]').length;
    for(var i=0;i<numberLength;i++){
      for(var k=i+1;k<numberLength;k++){
        if(numbers[i]>numbers[k]){
          var save=numbers[i];
          numbers[i]=numbers[k];
          numbers[k]=save;
        }
      }
    }
    $(".box").text(numbers[0]+","+numbers[1]+","+numbers[2]);
  });
});
¥JavaScript¥
            

コメントのアイコン解説

まずボタンがクリックされることをトリガーにします。そしてinputにそれぞれidが指定されているのでそのvalueをそれぞれ変数に代入します。その変数を前から配列に代入してそれを最後に並び替え、それをboxで表示するという流れです。今回の肝となるのは並べ替えの部分だと思います。for文を2個使って総当たりするようにしています。そして大きいものを後ろに小さいものを前にくるように変数saveを使って一時的に数値を保存しその空いたところに入れ替わる数値を代入しています。そしてsaveによって保存されていた数値をもう一方に代入しています。
ログインして解答を見る
完了にする!
twitterのアイコン
活動記録をTweetする
jQueryAnimationを学ぶなら現役エンジニア監修「甲賀コース」
LINEの友達追加でお役立ち動画をGET!!

閉じる