<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 ='エックス(1)'; var wordx2 ='エックス(2)'; var wordx3 ='エックス(3)'; var wordx4 ='エックス(4)'; var wordx5 ='エックス(5)'; // 選んだ計算式(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番の計算式を選んだときは、エックス(4)の表示と計算結果については表示されないようにしたいのですが、非表示にすることは出来たものの、歯抜けのようなカタチになるため、そこを改善する方法もご教授いただけると助かります