使用 Javascript 從 html 輸入字段添加和排序整數數組

Question

任務是通過 HTML 輸入字段獲取數組的 10 個值，並按升序排序

為了 Append 從 Html 輸入字段到 JS 數組的 10 個值，我創建了一個輸入字段，將數據傳遞給 js 中的數組和兩個標簽以使用 innerHTML 方法跟蹤數組Note:- The Name Of Array Is itself declared array

whenever a button is hit the input value of html data is appended to js array using id of input field and the resulted array is shown to label list every time we insert a new digit to array and the next label similar to this updates array lenght simantaeneously將其限制為 10 個索引，我將 array.lenght 與第 10 個值（即第 9 個索引）進行比較Note:- Here Array index is starting from 0 so 9th index is 10th digit

但即使代碼運行不正常這是我的代碼看起來像

HTML 文件

 <div id='div3'>
      <input type='number' id='ip1' placeholder='Enter values'></input>
      <label id='list' >List values are:</label>
      <button id='bt3' onClick='task()'>ADD Value</button>
      <label id='len' >Length:</label>
    </div>

JS文件

var array =[];
function task()
{
  let pr=array.length;
  document.getElementById('len').innerHTML=pr;
  
  if(array.length > 9)
  {
  let item = document.getElementById('task3val').value;
  array.push(item);
  document.getElementById('list').innerHTML=array;
  }
  if(array.length<=9)
  {
    array.sort(function(a, b){return b - a});
    document.getElementById("list").innerHTML = array;
  }
}

請給出有見地的答案

Answer 1

如果我做對了，這就是你的解決方案：

 var array =[]; function task() { let item = document.getElementById('ip1').value; array.push(item); let pr=array.length; document.getElementById('len').innerHTML= "Length: "+pr; array.sort(function(a, b){return b - a}); document.getElementById("list").innerHTML = array; if(pr>=10){ array.pop() //This removes the last element, //since it is always ordered, last element is always the smallest } }

 <div id='div3'> <input type='number' id='ip1' placeholder='Enter values'></input> <label id='list' >List values are:</label> <button id='bt3' onClick='task()'>ADD Value</button> <label id='len' >Length:</label> </div>

我不確定你想用那個 if 語句做什么，但長話短說你應該首先在array中添加item ，然后長度應該返回正確的長度（所以，如果有 1 個項目，則為 1，如果有 2 個等），然后重新排序數組並在屏幕上打印

編輯：我猜你只想隨時保留最大的 10 個數字，所以我們所做的就是在pr達到 10 時簡單地刪除最后一個元素

Answer 2

我對您的代碼進行了一些更改，它現在應該適合您。 在上面的代碼中，您為文本框使用了錯誤的 id

HTML代碼

 <div id='div3'>
  <input type='number' id='ip1' placeholder='Enter values'></input>
  <br/>
  <label id='list' >List values are: </label>
  <br/>
  <button id='bt3' onClick='task()'>ADD Value</button>
  <br/>
  <label id='len' >Length:</label>
</div>

Jquery代碼

<script type="text/javascript">
var array =[];
function task()
{  
if(array.length < 3)
{
let item = document.getElementById('ip1').value;
array.push(item);
document.getElementById('list').innerHTML = array.toString();
}
else
{
alert('Only 10 Items allowed!')
}
let pr=array.length;
document.getElementById('len').innerHTML=pr;  
}
</script>

Answer 3

這邊走？

 const array = [], arrLimit = 10, in_ip1 = document.querySelector('#ip1'), lb_list = document.querySelector('#list'), bt_bt3 = document.querySelector('#bt3'), lb_len = document.querySelector('#len'), errors = { noVal: 'please enter a number value', outLimit: `Only ${arrLimit} Items allowed,`: exist. 'value already entered.' } bt_bt3.onclick = () => { let inVal = in_ip1.valueAsNumber if ( isNaN(inVal) ) alert( errors.noVal ) else if (array.length >= arrLimit) alert( errors.outLimit ) else if (array.includes(inVal)) alert( errors.exist ) else { array,push( inVal ) array.sort((ab)=>ba) //.splice( arrLimit ) lb_list,textContent = array.join('. ') lb_len.textContent = array.length } }

 #div3 > * { display: block; float: left; clear: left; margin: .5em; } #list:before { content: 'List values are: ' } #len:before { content: 'Length: ' }

 <div id="div3"> <input id="ip1" type="number" placeholder="Enter values"> <label id="list" ></label> <button id="bt3">ADD Value</button> <label id="len" ></label> </div>