kok1219
@kok1219 (koki kobayashi)

Are you sure you want to delete the question?

If your question is resolved, you may close it.

Leaving a resolved question undeleted may help others!

We hope you find it useful!

JavaScript 数値の入れ替え sort

解決したいこと

出力される数値を小さい順に並べたときに、
一桁の数字は並び替えられるが、二桁の数値がうまく並ばないため、教えてほしいです。

スクリーンショット 2022-02-17 21.52.46.png

該当するソースコード

ソースコードを入力




送信

let array = [];

button.addEventListener('click', function (){
  let textBox = document.getElementById('input');
  let inputValue = textBox.value;
  let output = inputValue;
  let num = document.getElementById('input').value;  


  /*if(!isNaN(num)){
  array.push(num);
  array.sort(function(a,b){
    return (a-b)
  });*/

  if(!isNaN(num)){
    array.push(num);

    for(let outer = 0; outer < array.length - 1; outer++){
      for(let i = array.length; outer < i; i--){
        if(array[i] < array[i-1]){ 
          let tmp = array[i];
          array[i] = array[i-1];
          array[i-1] = tmp;
        }
      }
    }

    // [x]は配列の番号

    /*for(let i=0; i < array.length; i++){
      for(let x=0; x<array.length-i; x++){
        if(array[x] > array[x+1]){
          [array[x],array[x+1] = array[x+1],array[x]];
        }
      }
    }*/


  console.log(array);

  } else {
  alert("数値以外が入力されています");
  return document.getElementById('input').value = "";
  }

  document.getElementById('outputArea').textContent = Array.from(new Set(array));
  document.getElementById('input').value = "";


});
0

2Answer

変数 num は文字列型になってます。
値を交換するか否かの判定を数値型にキャストしながらするように変えてください。
今の状態だと辞書式順序でソートしてます。

3Like

Comments

  1. @kok1219

    Questioner

    なるほどです!
    解決することができました!
    ありがとうございます!!

回答は、@piyota6 さんの仰る通りです。
一応参考までにサンプルソース掲載します。

ポイントは
if(array[i] < array[i-1]){

if(Number(array[i]) < Number(array[i-1])){
とキャストしてから比較するところですね。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>JavaScript 数値の入れ替え sort</title>
</head>

<body>
    <input id="input" type="text" name="name" size="40" maxlength="20">
    <input id="button" type="submit" value="送信"></input>
    <div id="outputArea"></div>
<script>
let array = [];
button = document.getElementById('button');

button.addEventListener('click', function () {
  let textBox = document.getElementById('input');
  let inputValue = textBox.value;
  let output = inputValue;
  let num = document.getElementById('input').value;


  /*if(!isNaN(num)){
  array.push(num);
  array.sort(function(a,b){
    return (a-b)
  });*/

  if(!isNaN(num)){
    array.push(num);

    for (let outer = 0; outer < array.length - 1; outer++) {
      for (let i = array.length; outer < i; i--) {
        if (Number(array[i]) < Number(array[i-1])) {
          let tmp = array[i];
          array[i] = array[i-1];
          array[i-1] = tmp;
        }
      }
    }

    // [x]は配列の番号

    /*for(let i=0; i < array.length; i++){
      for(let x=0; x<array.length-i; x++){
        if(array[x] > array[x+1]){
          [array[x],array[x+1] = array[x+1],array[x]];
        }
      }
    }*/


  console.log(array);

  } else {
    alert("数値以外が入力されています");
    return document.getElementById('input').value = "";
  }

  document.getElementById('outputArea').textContent = Array.from(new Set(array));
  document.getElementById('input').value = "";


});

</script>
</body>
</html>
0Like

Comments

  1. @kok1219

    Questioner

    ご丁寧にありがとうございます!
    理解できました!

Your answer might help someone💌