如何使用JavaScript中的from輸入將新物件推送到物件陣列？-有解無憂

正如標題所說，我有一個物件陣列：

let bookObjects = [
        {
            title: "Defender With A Goal",
        },
        {
            title: "Pirate Of The End",
        },
        {
            title: "Kings Of Rainbows",
        },
        {
            title: "Traitors Of The Forsaken",
        },
        {
            title: "Enemies And Invaders",
        },
    ];

我有一個表格：

<form name="myform" action="" method="GET">
    Add new element to the table: <br>
    <input type="text" name="inputbox" value="">
    <p>
        <input type="button" name="button" value="Submit" onClick="addNewObjet(this.form)">
    </p>
</form>

還有一個應該添加新物件的函式：

addNewObjet = (form) => {
        let newTitle = form.inputbox.value; //inputbox is the name of the input

        bookObjects.push(
            {
                title: newTitle,
            },
        );
    }

如果我嘗試在沒有輸入的情況下推入 bookObjects，它確實可以作業，但使用表單卻不行。

uj5u.com熱心網友回復：

let bookObjects = [
        {
            title: "Defender With A Goal",
        },
        {
            title: "Pirate Of The End",
        },
        {
            title: "Kings Of Rainbows",
        },
        {
            title: "Traitors Of The Forsaken",
        },
        {
            title: "Enemies And Invaders",
        },
    ];
    
    addNewObjet = (form) => {
        let newTitle = form.inputbox.value; //inputbox is the name of the input

        bookObjects.push(
            {
                title: newTitle,
            },
        );
        
      var table = document.getElementById("tbl");
      table.innerHTML = "";
      
      bookObjects.forEach(b => {
      var row = table.insertRow(0);

       
      var cell1 = row.insertCell(0);
      var cell2 = row.insertCell(1);

       
      cell1.innerHTML = b.title;
      })

     
      
   
    }
        
      var table = document.getElementById("tbl");

     
      var row = table.insertRow(0);

       
      var cell1 = row.insertCell(0);
      var cell2 = row.insertCell(1);

       
      cell1.innerHTML = newTitle;
   
    }

這會將輸入放入表格中，這似乎有效。

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/520857.html

標籤：javascript数组形式目的输入

上一篇：在命令提示符下從另一個單獨的類呼叫建構式時收到“找不到符號”錯誤

下一篇：如何獲取陣列內物件的其余值