Попытка отобразить абзац на HTML странице из JavaScript

Question

У меня проблема с моим JavaScript. Я пытаюсь отобразить результаты операции, которая отображает пользовательские настройки мобильного телефона обратно пользователю. Когда я тестирую этот код в веб-браузере, мне показывается пустая веб-страница без ошибок в консоли JavaScript. Я что-то здесь сделал не так? Ниже показан мой код.

// This is an array of the objects in the website, showing the phone information that will be used to filter for the user to view. 

const phones = [{
  name: "iPhone XS", brand: "Apple", cost: 43, data: "500MB", minutes: "Unlimited", texts: "Unlimited"
},
{
  name: "iPhone 11", brand: "Apple", cost: 64, data: "90GB", minutes: "Unlimited", texts: "Unlimited"
},
{
  name: "Galaxy S10", brand: "Samsung", cost: 30, data: "20GB", minutes: "Unlimited", texts: "Unlimited"
},
{
  name: "Galaxy S10", brand: "Samsung", cost: 65, data: "Unlimited", minutes: "Unlimited", texts: "Unlimited"
},
{
  name: "Galaxy A10", brand: "Samsung", cost: 11.99, data: "500MB", minutes: 250, texts: "Unlimited"
},
{
  name: "Galaxy S9", brand: "Samsung", cost: 31, data: "20GB", minutes: "Unlimited", texts: "Unlimited"
},
{
  name: "StarTAC 130", brand: "Motorola", cost: 3, data: "0MB", minutes: 200, texts: 500
},
{
  name: "Pixel 3A", brand: "Google", cost: 23, data: "4GB", minutes: "Unlimited", texts: "Unlimited"
},
{
  name: "Xperia 10", brand: "Sony", cost: 30, data: "20GB", minutes: "Unlimited", texts: "Unlimited"
},
{
  name: "P30", brand: "Huawei", cost: 27.99, data: "500MB", minutes: 500, texts: "Unlimited"
}]

// These are asking the user for entry of the data into the system.
const phoneBrand = prompt("Enter a phone brand")

const phoneCost = prompt("Enter a monthly cost")

const phoneData = prompt("Enter the amount of data")

const phoneMins = prompt("How many minutes?")

const phoneTexts = prompt("How many texts?")

// This is then filtering the object of phones to match what the user has entered into the system.

const matchingPhones = phones.filter(function(phone) {
    if(phone.brand===phoneBrand && phone.cost.toString()===phoneCost && phone.data===phoneData && phone.minutes.toString()===phoneMins && phone.texts.toString()===phoneTexts) {
        return true;
    }
    return false;

})

// This is then displaying data in the system.

const returnPhones = document.querySelector("#returnPhones");

matchingPhones.forEach(function(phone) {

    const newParagraph = document.createElement("p");
    newParagraph.textContent=`The matching plans are as follows - ${matchingPhones}`;
    returnPhones.appendChild(newParagraph);

})

Answer 1

Я получил это в ответ, # 1 убедитесь, что вы определили div returnPhones до определения Javascript:

<div id="returnPhones">

</div>

Я протестировал измененный ниже код, и он работает:

    const phones = [{
    name: "iPhone XS", brand: "Apple", cost: 43, data: "500MB", minutes: "Unlimited", texts: "Unlimited"
},
    {
        name: "iPhone 11", brand: "Apple", cost: 64, data: "90GB", minutes: "Unlimited", texts: "Unlimited"
    },
    {
        name: "Galaxy S10", brand: "Samsung", cost: 30, data: "20GB", minutes: "Unlimited", texts: "Unlimited"
    },
    {
        name: "Galaxy S10", brand: "Samsung", cost: 65, data: "Unlimited", minutes: "Unlimited", texts: "Unlimited"
    },
    {
        name: "Galaxy A10", brand: "Samsung", cost: 11.99, data: "500MB", minutes: 250, texts: "Unlimited"
    },
    {
        name: "Galaxy S9", brand: "Samsung", cost: 31, data: "20GB", minutes: "Unlimited", texts: "Unlimited"
    },
    {
        name: "StarTAC 130", brand: "Motorola", cost: 3, data: "0MB", minutes: 200, texts: 500
    },
    {
        name: "Pixel 3A", brand: "Google", cost: 23, data: "4GB", minutes: "Unlimited", texts: "Unlimited"
    },
    {
        name: "Xperia 10", brand: "Sony", cost: 30, data: "20GB", minutes: "Unlimited", texts: "Unlimited"
    },
    {
        name: "P30", brand: "Huawei", cost: 27.99, data: "500MB", minutes: 500, texts: "Unlimited"
    }]

// These are asking the user for entry of the data into the system.
const phoneBrand = prompt("Enter a phone brand")

const phoneCost = prompt("Enter a monthly cost")

const phoneData = prompt("Enter the amount of data")

const phoneMins = prompt("How many minutes?")

const phoneTexts = prompt("How many texts?")

// This is then filtering the object of phones to match what the user has entered into the system.

const matchingPhones = phones.filter(function(phone) {
    if(phone.brand===phoneBrand && phone.cost.toString()===phoneCost && phone.data===phoneData && phone.minutes.toString()===phoneMins && phone.texts.toString()===phoneTexts) {
        return true;
    }
    return false;

})

// This is then displaying data in the system.

const returnPhones = document.querySelector("#returnPhones");

matchingPhones.forEach(function(phone) {

    const newParagraph = document.createElement("p");
    newParagraph.textContent='The matching plans are as follows - ' + phone.name;
    returnPhones.appendChild(newParagraph);

})