JavaScript:将索引号添加到我的数组元素的函数不断应用索引号

Question

好吧，对这个有点难过。我创建了一个函数，这个函数根据数组的长度在我的数组元素的前面添加一个数字。这里的希望是最终用户在查看图书列表时能够看到图书的索引号。

var myFormData = [];

  function addArrayElement() {
    for(i=0; i < myFormData.length; i++){       
    myFormData[i] = i+1 + ": " + myFormData[i] + "<br>";
    }

我如何检查各个数组元素是否已经有数字和应用断点将其打印到 HTML

。

基本上，我只需要能够在用户提交时将索引号和断点添加到数组的新元素，而不是将其应用于已提交的所有内容。

我看到了逻辑错误，我知道每次 for 循环运行时它都会遍历数组的每个元素并添加一个索引号和一个断点。我不知道如何在没有 for 循环的情况下为每个元素提供唯一标识符。

这是否可能以某种方式实现相同的效果，方法是存储数组元素的特定索引号，然后在打印到屏幕时以某种方式将其附加到输出上。像这样？

document.getElementById('booktitle').innerHTML = INDEXNUMBER + ":" +myFormData+join("<br>);

不过我认为这个数字总是像这样是静态的。我不确定。

我不知道这段代码是否相关，但这些是我用来将书籍打印到 HTML 元素以及我处理数据提交到数组的函数。

      function printBooks() {
        clearBook();
        alert("Sorting your books");
        //Function within the default sort method
        //The inital array.sort(); is case sensitive and ruined the sorting procedure
        //Had to refactor it in my code to make it sort correctly
        myFormData.sort(function(a,b){
        a = a.toLowerCase();
        b = b.toLowerCase();
        if(a == b) return 0;
        return a < b ? -1 : 1;
        });
        addArrayElement();
        document.getElementById('booktitle').innerHTML = myFormData;            
    }



     function submitData()
                         {     
        value1 = document.getElementById("myTextBox").value;
        var boxCheck = document.getElementById("myTextBox").value;
           if (boxCheck.length < 1)
              {
                alert("Search field is blank")   
              }
           else {
              myFormData.push(value1);
             alert("Data Contents: " + myFormData);
             alert("You have submitted:" + " " + value1 + " " + "to your library." )
             document.getElementById('booktitle').innerHTML = myFormData;          
           }
        }

Answer 1

也许您可以检查您的元素，看看它是否已经包含 "<br>"还是不是。

  function addArrayElement() {
    for(i=0; i < myFormData.length; i++){
    if(myFormData[i].indexOf("<br>") < 0)
       myFormData[i] = i+1 + ": " + myFormData[i] + "<br>";
    }

或者另一种方法是创建另一个将显示的数组而不是 myFormData ;

   var arrayToDisplay = [];
   function addArrayElement() {
    for(i=0; i < myFormData.length; i++){
       arrayToDisplay[i] = i+1 + ": " + myFormData[i] + "<br>";
    }

因此您的 arrayToDisplay将始终只包含 index + value of previous array