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

Question

任务是通过HTML输入字段获取数组的10个值并按递增顺序对它们进行排序

为了将Html输入字段中的10个值附加到JS数组，我创建了一个输入字段，将数据传递到JS中的数组，并使用innerHTML方法创建了两个标签来跟踪数组Note:- The Name Of Array Is itself declared array

每当按下按钮时，html数据的输入值都会附加到js数组中使用输入字段的id每次在数组中插入新数字时，结果数组都会显示在标签列表中与此类似的下一个标签同时更新数组长度为了将其限制为10个索引，我将数组长度与第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 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;
}
}

请给出真知灼见的答案

Answer 1

我对您的代码做了一些更改，现在应该可以使用了。在上面的代码中，您使用了错误的文本框 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 2

如果我做对了，这就是您的解决方案：

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个，则为2，等等(，然后重新排序数组并将其打印在屏幕上

编辑：我想你在任何时候都只想保留最大的10个数字，所以我们只需要在pr达到10 时删除最后一个元素

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((a,b)=>b-a) //.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>