javascriptで入力された数値によって変わる計算結果を、結果に応じて並べ替えて表示したい

Question

<script>
function fnckeisan() {
// 入力された数値
var sss = (document.querySelector('#sss').value);
// 選択された1番～5番の計算式
var asall={"a1":1,"a2":2,"a3":3,"a4":4,"a5":5};
var selecas= asall[document.querySelector('#as').value];
// 各種 関数の定義
var x1 = 0;
var x2 = 0;
var x3 = 0;
var x4 = 0;
var x5 = 0;
var word ='数値の小さな順に並べ替え';
var wordx1 ='エックス（１）';
var wordx2 ='エックス（２）';
var wordx3 ='エックス（３）';
var wordx4 ='エックス（４）';
var wordx5 ='エックス（５）';
// 選んだ計算式（1番～5番）によってx1～x5の数値が変わる
switch (selecas)
            {
                case 1:
                    x1 = 10 , x2 = 20 , x3 = 30 , x4 = 40 , x5 = 50;
                    break;
                case 2:
                    x1 = 100 , x2 = 200 , x3 = 300, x4 = 400 , x5 = 500;
                    break;
                case 3:
                    x1 = 150 , x2 = 250 , x3 = 350 , x4 = 450 , x5 = 550;
                    break;
                case 4:
                    x1 = 1 , x2 = 2 , x3 = 3 , x4 = 4 , x5 = 5;
                    break;
                case 5:
                    x1 = 180 , x2 = 280 , x3 = 380 , x4 = 480 , x5 = 580;
                    break;
               }
// 入力されたsssの値によって計算式および結果が変わります
if (sss >= 300){
 ans1 = (sss - 300) * x1;
 ans2 = (sss - x2) ;
 ans3 = (sss - x3) * x3;
 ans4 = (sss - x4) * x4; 
 ans5 = (sss - 300) * x5;
  }else if (sss >= 100){  
 ans1 = (sss - 100) * x5;
 ans2 = (sss - x4) * x4;
 ans3 = (sss - x3) * x3;
 ans4 = (sss - x2) ;
 ans5 = (sss - 100) * x1;
  }else if (sss <= 100){
 ans1 = (sss * 1 ) + x1;
 ans2 = (sss * 2) + x2;
 ans3 = (sss * x3 ) ;
 ans4 = (sss * 4) + x4;
 ans5 = (sss * x5 ) + x5;
  }
// 計算結果を表示します
  document.querySelector('#ansall').textContent = `${word}
${wordx1}${Math.floor(ans1)}
${wordx2}${Math.floor(ans2)}
${wordx3}${Math.floor(ans3)}
${selecas==4?'':wordx4}${selecas==4?'':Math.floor(ans4)}
${wordx5}${Math.floor(ans5)}`;  
}
</script>
<form>
<td>数値を入力してください（1～9999）</td>
<input type="text" id="sss" type="number" min="0" max="9999" value="0">
<td>1番～5番の計算式を選んでください</td>
<select id="as">
<option value="a1">1番</option>
<option value="a2">2番</option>
<option value="a3">3番</option>
<option value="a4">4番</option>
<option value="a5">5番</option>
</select>
　<br>
<input type="button" value="計算" onclick="fnckeisan();">
　<br>
<input type="reset" value="リセット">
<div id="ansall" style="white-space:pre;"></div>
</form>



==============================================================

入力された数値や、1番～5番の中から選んだ計算式によって、出力される数値が異なってくるプログラムですが、入力値に応じて、あるいはどの計算式を選んでも、数値の小さな順に表示されるようにしたいと思っています。

しかしながら、どのようにプログラムを書けばよいか分からないため、追加すべきところなどをご教授いただけると助かります。

なお、4番の計算式を選んだときは、エックス（４）の表示と計算結果については表示されないようにしたいのですが、非表示にすることは出来たものの、歯抜けのようなカタチになるため、そこを改善する方法もご教授いただけると助かります

Comments

[yambejp]

すでにほぼ同じ内容をいくつも回答していますよね？何がわからないのでしょうか？具体的にうまくいかないデータを提示ください

[TreesShimi]

分からないのは「入力値に応じて、あるいはどの計算式を選んでも、数値の小さな順に表示されるようにするための具体的なプログラムの書き方」です。それと「4番の計算式を選んだときは、エックス（４）の表示と計算結果については表示されないようにしたいのですが、非表示にすることは出来たものの、歯抜けのようなカタチになるため、その点を改善する方法」も分からないため、それについてもご教授いただきたく思っています。

[spookybird]

質問者さんにとって、今つくろうとしているものは難しすぎると言わざるを得ないと思います。作りたいものを実現するためにどういう処理が必要なのか順番にひとつずつ抜き出して、そのためにどういうコードを書かないといけないのかを一歩一歩勉強してみてはどうでしょうか。

[TreesShimi]

例えば、上記の現行のプログラムでは10000と数値を入力し、1番を選んで計算すると、エックス（1）97000、エックス（2）9980、エックス（3）299100、エックス（4）398400、エックス（5）485000と、このような順番で表示されるようになっていますが、これをエックス（2）9980、エックス（1）97000、エックス（3）299100、エックス（4）398400、エックス（5）485000、とこのような順番で表示されるようにし、なおかつ、次に例えば50の数値を入力して計算しなおすと、エックス（1）60、エックス（2）120、エックス（3）1500、エックス（4）240、エックス（5）2550と、このような順番で表示されますが、これもエックス（1）60、エックス（2）120、エックス（4）240、エックス（3）1500、エックス（5）2550と、このような順で表示されるようにしたいのです。さらにその次に4番を選択して計算しなおすと、エックス（1）51、エックス（2）102、エックス（3）150、エックス（5）255と、このように表示されますが、この場合はたまたま順番は小→大の順に並んでますが、エックス４が表示されていたところが空白の歯抜けになってしまうため、これを改善するためにどうすれば良いか知りたいというわけです。だいぶ長くなってしまいましたが、具体的に説明させていただきますとこういう感じになります。

[TreesShimi]

今回の質問内容はおそらくそんなに難しいことではないはずだと思いますので、この部分をこれに変えれば良いとか、具体的なコード（プログラム？）を簡単なサンプル的なもので良いので教えていただける方がいらっしゃいましたら幸いです。ちなみに別に丸投げしているわけではありませんのであしからず。簡単かつ具体的な説明をすることができる方がいらっしゃいましたら嬉しく思います。

[yambejp]

ソートするなら最初に配列に入れるのが効率的、あとはそれぞれのデータの何をつかってソートするか、なにを条件にフィルタするかなど考えて、結果はjoinで処理すればよいでしょう

[TreesShimi]

どうもありがとうございます。

Answer 1

こうしてみて

// 計算結果を表示します
document.querySelector('#ansall').textContent = word +"\n"+
[
  wordx1+Math.floor(ans1),
  wordx2+Math.floor(ans2),
  wordx3+Math.floor(ans3),
  selecas==4?'':(wordx4+Math.floor(ans4)),
  wordx5+Math.floor(ans5),
  ].filter(function(x){
    return x.match(/\d/);
  }).sort(function(x,y){
    return parseInt(x.match(/(\d+)/)[1])>parseInt(y.match(/(\d+)/)[1]);
  }).join("\n");
}

Comments

[TreesShimi]

yambejpさん、ありがとうございます！
うまく動作しています。これを参考にして勉強させていただきます！
助かりました！また何かわからないところが出てきたときは、またお力添えいただけると嬉しく思います！