使用按鍵功能以升序排列文本框中的數字 - HTML

嗨，我是社區中的新成員。使用按鍵功能以升序排列文本框中的數字 - HTML

我想創建一個簡單的頁面，其中有3個文本框。第一個文本框是輸入數字的地方。對於第二個和第三個文本框，只要數字從第一個文本框輸入，結果將以不同的格式顯示。第二個文本框應顯示逗號，這是我能夠做到的。 例如：只要我在第一個文本框22 55 01 02上輸入一個數字，第二個文本框將顯示22,55,01,02，但是在第三個文本框中它應該顯示與第二個文本框相同的編號，但是在升序這是我無法做到的。試圖尋找解決方案已經到現在有效。也許我只是想念一些東西。任何幫助將非常感激。

function boxx1KeyPress() { 
 
    var boxx1 = document.getElementById("boxx1"); 
 
    var s = boxx1.value.replace(/[ ,]+/g, ","); 
 
    var x = s; 
 

 
    var lblValue = document.getElementById("boxx2"); 
 
    lblValue.value = "" + s; 
 

 
    // code for textbox 3 that didn't work 
 
    //function sortAscending(a, b) 
 
    //{return a - b; 
 
    // } 
 

 
    //var points = boxx3.value; 
 
    //points.sort(sortAscending); 
 
    //document.getElementById("boxx3").innerHTML = points; 
 

 
} 
 

 
function ClearField() { 
 
    document.getElementById("boxx1").value = ""; 
 
    document.getElementById("boxx2").value = ""; 
 
    document.getElementById("boxx3").value = ""; 
 
}

<body> 
 
    <B><br><center>PASTE HERE</br>  
 
<input id="boxx1" type="text" onKeyPress="boxx1KeyPress()" 
 

 
onKeyUp="boxx1KeyPress()"> 
 
<br> 
 

 
<input type="button" Value="Clear Field" onClick="ClearField()"> 
 

 
<br> 
 

 
<br>11x5 GAMES</BR> 
 
<span id="lblValue"></span> 
 
<input id="boxx2" type="text"> 
 

 
<br> 
 
<br>Keno Games</br> 
 
<input id="boxx3" type="text"> 
 
<br> 
 
<p id="Keno"></p> 
 
<input type="button" Value="Ascend" onClick="points.sort(sortAscending)"> 
 

 
</body>

來源

2017-07-26 usernameon

歡迎社會@usernameon – monikapatel

@DjordjeVujicic你只是刪除你的答案？我看不到隊友。 – monikapatel

@母親是的，我做過了，因爲我不想讓其他人把我當傻瓜......如果我沒有爲我創建的東西寫信，那麼就沒有必要讓我的回答在這裏 –

它實際上非常簡單JavaScript中的數字進行排序。所有你需要做的是：

斯普利特初始字符串到一個數組與.split(" ")（分裂的空間）。
用.sort()對數字進行排序。
將數字加回到字符串中.join()。

請記住，作爲輸出盒是<input>，你需要使用.value，而不是.innerHTML：

function boxx1KeyPress() { 
 
    var boxx1 = document.getElementById("boxx1"); 
 
    var s = boxx1.value.replace(/[ ,]+/g, ","); 
 
    var x = s; 
 

 
    var lblValue = document.getElementById("boxx2"); 
 
    lblValue.value = "" + s; 
 

 
    // Fixed code for sorting the numbers 
 
    var points = boxx1.value.split(" "); 
 
    document.getElementById("boxx3").value = points.sort().join(); 
 

 
} 
 

 
function ClearField() { 
 
    document.getElementById("boxx1").value = ""; 
 
    document.getElementById("boxx2").value = ""; 
 
    document.getElementById("boxx3").value = ""; 
 
}

<body> 
 
    <br> 
 
    <center> 
 
    <b>PASTE HERE</b> 
 
    <input id="boxx1" type="text" onKeyPress="boxx1KeyPress()" onKeyUp="boxx1KeyPress()"> 
 
    <br> 
 
    <br> 
 
    <input type="button" Value="Clear Field" onClick="ClearField()"> 
 
    <br> 
 
    <br> 
 
    11x5 GAMES 
 
    <span id="lblValue"></span> 
 
    <input id="boxx2" type="text"> 
 
    <br> 
 
    <br> 
 
    Keno Games 
 
    <input id="boxx3" type="text"> 
 
    <br> 
 
    <p id="Keno"></p> 
 
    <input type="button" Value="Ascend"> 
 
    </center> 
 
</body>

另外請注意，你有一些上面的代碼片段中的HTML稍微無效（主要是<br>是void element，所以標籤自關閉，因此</br>無效）。我在上面的代碼片段中清理了HTML。

希望這會有所幫助！ :)

來源

2017-07-26 20:46:42

你的主要問題是，你正在嘗試排序仍然是一個字符串的東西......你必須先把你的字符串放入一個數組中。

function boxx1KeyPress() { 
var boxx1 = document.getElementById("boxx1"); 
var s = boxx1.value.replace(/[ ,]+/g, ","); 
var x = s; 

var lblValue = document.getElementById("boxx2"); 
lblValue.value = "" + s; 

// get an array from our string s 
var arr = s.split(','); 
arr.sort(); // note that for strings or ints, the default sort is ascending 

document.getElementById("boxx3").innerHTML = arr.join(','); 
}

我用String.split方法得到的數組，在逗號隔開，並且Array.join方法將其重新轉換成字符串它被排序之後。

來源

2017-07-26 20:50:07 arbuthnott

將逗號分隔的字符串轉換爲數組。使用數組排序功能，你完成。

function boxx1KeyPress() { 
 
    var boxx1 = document.getElementById("boxx1"); 
 
    var s = boxx1.value.replace(/[ ,]+/g, ","); 
 
    var lblValue = document.getElementById("boxx2"); 
 
    lblValue.value = "" + s; 
 
    
 
} 
 

 
function sortDisending() { 
 
    \t \t var numberArray = document.getElementById("boxx2").value.split(","); 
 
\t \t numberArray.sort(function(a, b){return b-a}); 
 
    document.getElementById("boxx3").value = numberArray; 
 
    } 
 
    
 
    function sortAsending() { 
 
    \t \t 
 
    var numberArray = document.getElementById("boxx2").value.split(","); 
 
\t \t numberArray.sort(function(a, b){return a-b}); 
 
    document.getElementById("boxx3").value = numberArray; 
 
    } 
 

 
function ClearField() { 
 
    document.getElementById("boxx1").value = ""; 
 
    document.getElementById("boxx2").value = ""; 
 
    document.getElementById("boxx3").value = ""; 
 
}

<B><br><center>PASTE HERE 
 
<input id="boxx1" type="text" onKeyPress="boxx1KeyPress()" 
 

 
onKeyUp="boxx1KeyPress()"> 
 
<br> 
 

 

 

 
<br> 
 

 
<br>11x5 GAMES 
 
<span id="lblValue"></span> 
 
<input id="boxx2" type="text"> 
 

 
<br> 
 
<br>Keno Games 
 
<input id="boxx3" type="text"> 
 
<br> 
 
<p id="Keno"></p> 
 
<input type="button" Value="Ascend" onClick="sortAsending()"> 
 
<input type="button" Value="Descend" onClick="sortDisending()"> 
 

 
<input type="button" Value="Clear Field" onClick="ClearField()">

來源

2017-07-26 21:00:56 monikapatel

使用按鍵功能以升序排列文本框中的數字 - HTML

回答

相關問題