Свойство объекта, отправленное с HTML-ввода «undefined»

Question

Я новичок в кодировании. Я попытался найти подобную проблему на SO, но без надлежащего результата.

Я выписываю код, в котором форма HTML отправляет его значение в свойство объекта, а затем я хочу напечатать его в документе с помощью метода innerHTML. Я сохраняю объект в массиве, поэтому я могу ими манипулировать.

Некоторые проблемы возникают, когда я добавляю еще одно измерение в свой массив (arr[i][j] в коде ниже - второе измерение потребуется дополнительно) - тогда свойства объекта изменяются на «неопределенные» при печати. Что делать, чтобы получить доступ к свойствам объекта во втором измерении массива (только с использованием JS)? Это мой JS код:

var pro = 0; 
 
var ctg = 1; 
 
var arr = new Array(ctg); 
 
arr[0] = new Array(pro) 
 

 
function AddProduct() { 
 
    var n = document.getElementById('name').value; 
 
    var p = document.getElementById('price').value; 
 
    pro++; 
 
    for (i = arr[0].length; i < pro; i++) { 
 
    arr[0].push([{ 
 
     name: n, 
 
     price: p 
 
    }]); 
 
    } 
 
    var content = ''; 
 
    for (i = 0; i < arr.length; i++) { 
 
    for (j in arr[i]) { 
 
     content += arr[i][j].name + ' price is ' + arr[i][j].price + '<br>'; 
 
    } 
 
    } 
 
    document.getElementById('p').innerHTML = content; 
 
};

и HTML в body:

<p id="p"></p> 
 
<input type="text" id="name" placeholder="name"> 
 
<br> 
 
<input type="text" id="price" placeholder="price"> 
 
<br> 
 
<input type="button" value="OK" onclick=A ddProduct()>

Answer 1

Попробуйте заменить

onclick="AddProduct()"

для

onclick=A ddProduct()

в html; и добавить [0] в

content += arr[i][j][0].name + ' price is ' + arr[i][j][0].price + '<br>';

для

content += arr[i][j].name + ' price is ' + arr[i][j].price + '<br>';

как вы оттолкнул массив, содержащий объект arr на первый for цикла. Для того, чтобы ссылаться на индекс массива, используйте скобки обозначения для извлечения объекта с индексом 0 массива в arr

var pro = 0; 
 
var ctg = 1; 
 
var arr = new Array(ctg); 
 
arr[0] = new Array(pro) 
 

 
function AddProduct() { 
 
    var n = document.getElementById('name').value; 
 
    var p = document.getElementById('price').value; 
 
    pro++; 
 
    for (i = arr[0].length; i < pro; i++) { 
 
    arr[0].push([{ 
 
     name: n, 
 
     price: p 
 
    }]); 
 
    } 
 
    var content = ''; 
 
    for (i = 0; i < arr.length; i++) { 
 
    for (j in arr[i]) { 
 
     content += arr[i][j][0].name + ' price is ' + arr[i][j][0].price + '<br>'; 
 
    } 
 
    } 
 
    document.getElementById('p').innerHTML = content; 
 
};

<p id="p"></p> 
 
<input type="text" id="name" placeholder="name"> 
 
<br> 
 
<input type="text" id="price" placeholder="price"> 
 
<br> 
 
<input type="button" value="OK" onclick="AddProduct()">