Javascriptで数字を並べ替える方法と、ユーザーの入力を受けて要素の位置を見つける方法はありますか？

私は、ユーザーから番号を取るフォームを持っています。私はこれらの数字を並べ替えて、出力を表示したい。またソート後、配列に存在する数値を入力し、ソートされた配列内の要素の位置を表示したいと思います。Javascriptで数字を並べ替える方法と、ユーザーの入力を受けて要素の位置を見つける方法はありますか？

しかし、私はソートの段階でそれに悩まされています。ここで

は私がしようとしているコードです：

<html> 
<body> 
<form name="f"> 
    <pre> 
     Enter number 1: <input type="text" name="first" id="first"> 
     Enter number 2: <input type="text" name="second" id="second"> 
     Enter number 3: <input type="text" name="third" id="third"> 
     Enter number 4: <input type="text" name="fourth" id="fourth"> 
     Enter number 5: <input type="text" name="fifth" id="fifth"> 
     Enter number 6: <input type="text" name="sixth" id="sixth"> 
     Enter number 7: <input type="text" name="seventh" id="seventh"> 
     Enter number 8: <input type="text" name="eighth" id="eighth"> 
     Enter number 9: <input type="text" name="ninth" id="ninth"> 
     Enter number 10: <input type="text" name="tenth" id="tenth"> 
    </pre> 
    <br> 
    <button onclick="sortfunction()">Click to sort</button> 
    <br><br> 
    Sorted numbers: <input type="text" name="sorted"> 
</form> 

<script> 
    function sortfunction() 
    { 
     var num=new Array(); 
     num[0]=document.getElementById("first"); 
     num[1]=document.getElementById("second"); 
     num[2]=document.getElementById("third"); 
     num[3]=document.getElementById("fourth"); 
     num[4]=document.getElementById("fifth"); 
     num[5]=document.getElementById("sixth"); 
     num[6]=document.getElementById("seventh"); 
     num[7]=document.getElementById("eighth"); 
     num[8]=document.getElementById("ninth"); 
     num[9]=document.getElementById("tenth"); 
     num.sort(); 
     document.f.sorted.value=num; 
    } 
</script>

を私はソートするためにクリックをクリックしていた場合、出力ボックスは、私が間違っているつもりです [object HTML InputElement],[object HTML InputElement],...

を示して？どんな種類の助けにも感謝します。ありがとう。

出典

2017-11-19 Steve Doson

で働い例を参照してくださいです。これを試してください： 'num [0] = document.getElementById（ 'first'）。value'。すべての要素に対してこれを行います。 –

@JosanIracheta Right！それは見落とす私のばかげたことでした！しかし、それをした後、結果は1秒間表示され、離れて、そしてテキストボックスさえ空になっています。 –

これは、フォームを送信しているためです。フォームの送信を停止する必要があります。 –

入力html要素の値を取得するにはselector.value例document.getElementById("first").valueを使用しています。

また、ソート関数は、デフォルトでは数値を文字列に変換してから並べ替えるため、いくつかの比較関数を取得する必要があります。ここで

(a,b)=>Number(a)>=Number(b)?1:-1

をコンペア機能多くのためMDNを参照してくださいあなたは、各要素の値を取得する必要があり、あなたの問題を解決するためのコード

<form name="f"> 
    <pre> 
     Enter number 1: <input type="text" name="first" id="first"> 
     Enter number 2: <input type="text" name="second" id="second"> 
     Enter number 3: <input type="text" name="third" id="third"> 
     Enter number 4: <input type="text" name="fourth" id="fourth"> 
     Enter number 5: <input type="text" name="fifth" id="fifth"> 
     Enter number 6: <input type="text" name="sixth" id="sixth"> 
     Enter number 7: <input type="text" name="seventh" id="seventh"> 
     Enter number 8: <input type="text" name="eighth" id="eighth"> 
     Enter number 9: <input type="text" name="ninth" id="ninth"> 
     Enter number 10: <input type="text" name="tenth" id="tenth"> 
    </pre> 
    <br> 
    <button onclick="sortfunction()">Click to sort</button> 
    <br><br> 
    Sorted numbers: <input type="text" name="sorted"> 
</form> 
<script> 


    function sortfunction(){ 
    event.preventDefault(); 
    var num=new Array(); 
    num[0]=document.getElementById("first").value; 
    num[1]=document.getElementById("second").value; 
    num[2]=document.getElementById("third").value; 
    num[3]=document.getElementById("fourth").value; 
    num[4]=document.getElementById("fifth").value; 
    num[5]=document.getElementById("sixth").value; 
    num[6]=document.getElementById("seventh").value; 
    num[7]=document.getElementById("eighth").value; 
    num[8]=document.getElementById("ninth").value; 
    num[9]=document.getElementById("tenth").value; 
    num.sort((a,b)=>Number(a)>=Number(b)?1:-1) 
    document.f.sorted.value=num; 
     } 
    </script>

codepen

出典

2017-11-19 05:10:23 HimanshuArora9419

document.getElementById("first");

ここ素子inputを返し、それがobject HTML InputElementタイプです。私が追加したいもう一つの事は、idでテキストタイプのすべての入力を手作業で収集する代わりにではなく、あなたの時間を節約し、入力の数を心配する必要がないループでそれを集めることができます。例：

<script> 
     var num = new Array(); 
     var textInputs = document.getElementsByTagName('input'); 
     for(var i=0; i<textInputs.length; i++) 
     { 
      if(textInputs[i].getAttribute('type')=='text') 
      { 
       num.push(textInputs[i].value); 
      } 
     } 
</script>

出典

2017-11-19 03:56:56 sandy

私はあなたが入力に対する無限の制限について言ったことが好きです。このためのサンプルフォームを表示できますか？ソート結果が表示されますか？ –

こんにちは、この[フィドル]（https://jsfiddle.net/skhalequ/apLL6Luy/4/）を参照してください。私のシステムではコードは正常に動作しています。残念ながら、私はフィドルで新しいですので、出力が正しく表示されていません。あなたのシステムでこれを試すことができます。 – sandy

私のソート機能は、特にフィドルでチェックしてください。 – sandy

Javascriptで数字を並べ替える方法と、ユーザーの入力を受けて要素の位置を見つける方法はありますか？

答えて

関連する問題