使用 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>