質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

228閲覧

javascriptで配列したデータを整数順に並び変えた上で、任意のデータだけを表示するにはどうすれば良い?

TreesShimi

総合スコア16

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2018/09/21 01:40

<script> function fnckeisan() { // 入力された数値(sss) var sss = (document.querySelector('#sss').value); // 1番または2番の選択 var asall={"a1":1,"a2":2}; var selecas= asall[document.querySelector('#as').value]; // カンマの定義 var conma = new Intl.NumberFormat(); // 各種 関数の定義 var x1; var x2; var x3; var x4; var x5; var word ='数値の小さな順に並べ替え'; var wordx1 =`<a href="#">回答(1)</a>`; var wordx2 =`<a href="#">回答(2)</a>`; var wordx3 =`<a href="#">回答(3)</a>`; var wordx4 =`<a href="#">回答(4)</a>`; var wordx5 =`<a href="#">回答(5)</a>`; var wordx6 =`<a href="#">回答(6)</a>`; var wordx7 =`<a href="#">回答(7)</a>`; var wordx8 =`<a href="#">回答(8)</a>`; var wordx9 =`<a href="#">回答(9)</a>`; var wordx10 =`<a href="#">回答(10)</a>`; var wordx11 =`<a href="#">回答(11)</a>`; var wordx12 =`<a href="#">回答(12)</a>`; var wordx13 =`<a href="#">回答(13)</a>`; var wordx14 =`<a href="#">回答(14)</a>`; var wordx15 =`<a href="#">回答(15)</a>`; var table1 =`<table><td>`; var table2 =`</td></table>`; // 選択(1番または2番)によってx1~x5の数値が変わる switch (selecas) { case 1: x1 = 10.5 , x2 = 20.6 , x3 = 30.9 , x4 = 40.8 , x5 = 50.7; break; case 2: x1 = 150.8 , x2 = 250.7 , x3 = 350.3 , x4 = 450.6 , x5 = 550.8; break; } // 入力されたsssの値(100未満または100以上)によってans1~ans15の計算式および結果が変わる if (sss >= 100){ ans1 = (sss - 300) * x1; ans2 = (sss - x2); ans3 = (sss - x3) * x3; ans4 = (sss - x4) * x4; ans5 = (sss - 300) * x5; ans6 = (sss - 20) * x1; ans7 = (sss - x2 - 30); ans8 = (sss - x3) * x1 + 400; ans9 = (sss - x4) * x2 * x2; ans10 = (sss - 300) * x5 * x1; ans11 = (sss - 100) * x1 + 400; ans12 = (sss - x2 + x5); ans13 = (sss - x3) * x3; ans14 = (sss - x2) * x4 + 1000; ans15 = (sss - 300) * x3 * x3; }else if (sss < 100){ ans1 = (sss - 100) * x5; ans2 = (sss - x4) * x4; ans3 = (sss - x3) * x3; ans4 = (sss - x2); ans5 = (sss - 100) * x1; ans6 = (sss - 300) * x1 * x1; ans7 = (sss - x2) * x2; ans8 = (sss - x3) * x3 + 2100; ans9 = (sss - x4) * x4 + 6000; ans10 = (sss - 300) * x5 + 100; ans11 = (sss - 300) * x1 - 300; ans12 = (sss - x2) + 4000; ans13 = (sss - x3) * x3 * x4; ans14 = (sss - x4) * x4 * x5 + 100; ans15 = (sss - 300) * x5 - 30; } // 計算結果の表示(2番を選んだ場合は、こちらで指定した結果については表示されない) document.querySelector('#ansall').innerHTML = word +("\n")+ [ wordx1+conma.format(ans1), selecas==2?'':(wordx2+conma.format(ans2)), wordx3+conma.format(ans3), selecas==2?'':(wordx4+conma.format(ans4)), wordx5+conma.format(ans5), selecas==2?'':(wordx6+conma.format(ans6)), wordx7+conma.format(ans7), selecas==2?'':(wordx8+conma.format(ans8)), wordx9+conma.format(ans9), selecas==2?'':(wordx10+conma.format(ans10)), wordx11+conma.format(ans11), selecas==2?'':(wordx12+conma.format(ans12)), wordx13+conma.format(ans13), selecas==2?'':(wordx14+conma.format(ans14)), wordx15+conma.format(ans15), ].filter(function(x){ return x.match(/\d/); }).sort(function(x,y){ return (x.match(/(\d+)/)[1])>(y.match(/(\d+)/)[1]); }).join("\n"); } </script> <form> <td>数値を入力してください(1~300)</td> <input type="text" id="sss" type="number" min="0" max="300" value="0"> <td>1番~5番の計算式を選んでください</td> <select id="as"> <option value="a1">1番</option> <option value="a2">2番</option> </select>  <br> <input type="button" value="計算" onclick="fnckeisan();">  <br> <input type="reset" value="リセット"> <div id="ansall" style="white-space:pre;"></div> </form>

上記のプログラムにおいて、計算されたans1~ans15の結果に応じて、それぞれを数値の小さな順に並び替えた上で、任意の結果だけを表示できるようにしたいと考えています。

(具体的には、ans1~ans15の計算結果の最小値から順に、5個だけ表示できるようにしたり、9個表示できるようにしたり、または全部を表示できるようにしたい)

しかし、現行のプログラムでは15個の結果すべてを表示することしかできず、さらに3つの問題点があり、どう改善すれば良いか分かりません。

① 出力されるans1~ans15の数値はカンマ付きで表示をしたいが、カンマ付きにすると並び替えがうまく機能しない。どうすると良いか?

② 出力するansの数が10個以内であれば、とりあえず並び替えは機能するが、10個を超えると機能しない。(\n)の扱いをどうすると良いか?

③ 並び替えの際に、負の整数のマイナスを無視して並び替えてしまう。どうすると良いか?

丸投げのように思われるかもしれませんが、改善の仕方をご教授いただけると大変ありがたく思います。

決して丸投げにはしていませんが、サンプルないし改善プログラムを提供いただけましたら、こちらで頑張って解読しながら学ばせていただきますので、どうぞよろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

① 出力されるans1~ans15の数値はカンマ付きで表示をしたいが、カンマ付きにすると並び替えがうまく機能しない。どうすると良いか?

カンマをとってparseInt(or parseFloat)して処理するか
カンマを付ける前の数値を配列にいれておく

② 出力するansの数が10個以内であれば、とりあえず並び替えは機能するが、10個を超えると機能しない。(\n)の扱いをどうすると良いか?

10個とか数量ではなく別の理由だと思います

③ 並び替えの際に、負の整数のマイナスを無視して並び替えてしまう。どうすると良いか?

そもそもマイナスがあるという話ではなかった

そもそも

拡張する予定があるなら、データの持ち方をかえてください

javascript

1document.querySelector('#ansall').innerHTML = word +("\n")+ 2[ 3 {val:ans1 ,text:wordx1+conma.format(ans1)}, 4 {val:ans2 ,text:selecas==2?'':(wordx2+conma.format(ans2))}, 5 {val:ans3 ,text:wordx3+conma.format(ans3)}, 6 {val:ans4 ,text:selecas==2?'':(wordx4+conma.format(ans4))}, 7 {val:ans5 ,text:wordx5+conma.format(ans5)}, 8 {val:ans6 ,text:selecas==2?'':(wordx6+conma.format(ans6))}, 9 {val:ans7 ,text:wordx7+conma.format(ans7)}, 10 {val:ans8 ,text:selecas==2?'':(wordx8+conma.format(ans8))}, 11 {val:ans9 ,text:wordx9+conma.format(ans9)}, 12 {val:ans10,text:selecas==2?'':(wordx10+conma.format(ans10))}, 13 {val:ans11,text:wordx11+conma.format(ans11)}, 14 {val:ans12,text:selecas==2?'':(wordx12+conma.format(ans12))}, 15 {val:ans13,text:wordx13+conma.format(ans13)}, 16 {val:ans14,text:selecas==2?'':(wordx14+conma.format(ans14))}, 17 {val:ans15,text:wordx15+conma.format(ans15)}, 18 ].filter(function(x){ 19 return x.text.match(/\d/); 20 }).sort(function(x,y){ 21 /* return x.val>y.val; */ //訂正 22 return x.val>y.val?1:-1; 23 }).map(function(x){ 24 }).map(function(x){ 25 return x.text 26 }).join("\n"); 27}

切り捨ててからカンマをつける

javascript

1document.querySelector('#ansall').innerHTML = word +("\n")+ 2[ 3 {val:ans1 ,text:wordx1+conma.format(Math.floor(ans1))}, 4 {val:ans2 ,text:selecas==2?'':(wordx2+conma.format(Math.floor(ans2)))}, 5 {val:ans3 ,text:wordx3+conma.format(Math.floor(ans3))}, 6 {val:ans4 ,text:selecas==2?'':(wordx4+conma.format(Math.floor(ans4)))}, 7 {val:ans5 ,text:wordx5+conma.format(Math.floor(ans5))}, 8 {val:ans6 ,text:selecas==2?'':(wordx6+conma.format(Math.floor(ans6)))}, 9 {val:ans7 ,text:wordx7+conma.format(Math.floor(ans7))}, 10 {val:ans8 ,text:selecas==2?'':(wordx8+conma.format(Math.floor(ans8)))}, 11 {val:ans9 ,text:wordx9+conma.format(Math.floor(ans9))}, 12 {val:ans10,text:selecas==2?'':(wordx10+conma.format(Math.floor(ans10)))}, 13 {val:ans11,text:wordx11+conma.format(Math.floor(ans11))}, 14 {val:ans12,text:selecas==2?'':(wordx12+conma.format(Math.floor(ans12)))}, 15 {val:ans13,text:wordx13+conma.format(Math.floor(ans13))}, 16 {val:ans14,text:selecas==2?'':(wordx14+conma.format(Math.floor(ans14)))}, 17 {val:ans15,text:wordx15+conma.format(Math.floor(ans15))}, 18 ].filter(function(x){ 19 return x.text.match(/\d/); 20 }).sort(function(x,y){ 21 return x.val>y.val?1:-1; 22 }).map(function(x){ 23 return x.text 24 }).join("\n"); 25}

投稿2018/09/21 01:48

編集2018/09/21 06:47
yambejp

総合スコア114583

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2018/09/21 02:01

追記しました参考にしてください ソート用にval、表示用にtextを用意しました
TreesShimi

2018/09/21 05:20

yambejpさん、さっそくご教授いただきありがとうございます!参考にさせてもらってます! 出力結果のうち、任意のデータを表示するためにはmapを使うということでしょうか? 追記していただいたプログラムだけでは機能しなかったので、やはり何かしらの追加ないし修正が必要ということですよね。。。 ちなみに、迷惑かけついでにもう一つ質問なのですが、数値の表示の際に、カンマ付きと小数点以下を切り捨て表示を同時に行うにはどうすれば良いでしょうか? conma.formatだけでは小数点以下が表示され、Math.floorだと小数点以下は表示されませんが、カンマ付きにならないので、ちょっと困ってます。。。
yambejp

2018/09/21 05:38

> 出力結果のうち、任意のデータを表示するためにはmapを使うということでしょうか? うまく理解しているか微妙ですが 今回表示用に用意した配列の中身がobjectなのでfilterしてsortした後で objectの中のtextだけを抽出するのがmapです。 最終的にはtextだけが入った配列ができあがるのでjoinで改行で繋いだ文字列を返しています
yambejp

2018/09/21 05:39

> 追記していただいたプログラムだけでは機能しなかった 命題の 「// 計算結果の表示(2番を選んだ場合は、こちらで指定した結果については表示されない)」 以下を私のソースに書き換えるだけです。
yambejp

2018/09/21 05:40

> カンマ付きと小数点以下を切り捨て表示を同時に行う 切り捨ててからカンマをつければよいでしょう
TreesShimi

2018/09/21 06:33

お返事ありがとうございます! ということは、15個の結果を並び替えた上で、例えば8個だけ表示するというのは、また別のプログラムを組まなければならないということですね。。。 あと、教わったプログラムの並び替えの結果なんですが、例えば500を入力して1番の選択で計算すると、15個の表示がされますが、上から5つは並び替えが出来ておらず、その下10個についてはうまく並び替えられているという状況なんです。。。 切り捨ててからカンマをつけるというのも、今も色々と調べながら試しているのですが、なかなかうまくいきません(××) 何度もアドバイスを求めてしまい申し訳ありません。
yambejp

2018/09/21 06:40

ああ、ごめんなさいsortが中途半端でした 1箇所修正したので再確認ください
yambejp

2018/09/21 06:47

「切り捨ててからカンマをつける」も対応版書いておきました
TreesShimi

2018/09/21 09:29

yambejpさん、返事が遅くなりました(汗) 何度もご対応いただき本当にありがとうございます! 教えていただいたプログラムでうまく機能しています! このプログラムはサンプルみたいなものなので、これからも拡張する予定ではありますが、また色々と学ばせてもらいながら頑張ります!! ありがとうございました!感謝です!!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問