使用 Javascript 从 html 输入字段添加和排序整数数组

Question

The Task Is To Get 10 Values Of Array Through HTML Input Field And Sort Them In Acceding Order

In Order To Append 10 Value's from Html Input field To JS Array I Created one input field which data is passed to array in js and Two labels to keep track of array using innerHTML Method 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 to limit it upto 10 index i compare array.lenght with 10th value ie 9th index Note:- Here Array index is starting from 0 so 9th index is 10th digit

But even Though Code Is Not Working Well Here's my code looks like

HTML File

 <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 FIle

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;
  }
}

Please Give Insighful Answer

Answer 1

If I'm getting it right, this is your solution:

 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>

I am not sure what you were trying to do with that if statement, but the long story is you should first add the item in the array , then the length should return the correct length (so, 1 if there is 1 item, 2 if there are 2, etc.) and then re-order the array and print it on screen

EDIT: I guess you only want to keep the biggest 10 numbers at any time, so what we do is we simply remove the last element once pr reaches 10

Answer 2

I have made few changes in your code, It should work for you now. in the above code, you were using the wrong id for the text box

HTML code

 <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 code

<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

this way?

 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>