javascript - 尝试从 JavaScript 在 HTML 页面上显示段落
问题描述
我的 JavaScript 有问题。我正在尝试向用户显示显示手机用户偏好的操作结果。当我在 Web 浏览器中测试此代码时,我在 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);
})
解决方案
我确实得到了回应,#1 确保在定义 Javascript 之前定义 returnPhones div:
<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);
})
推荐阅读
- node.js - Node.js 子进程运行 python 代码没有响应
- powershell - 如何在 PowerShell 脚本中运行 NuGet 命令?
- javascript - 为什么 ReactJS 中按钮的属性是“未定义”?
- scala - SSLHandshakeException 在通过 Alpakka 将文件上传到 AWS S3 期间发生
- html - 这里的地图没有显示在 HTTPS 页面上
- ios - GameScene SpriteKit 不适合 iPhone X 显示器
- jquery - 如何使用 Ajax 更新输入
- printjs - 浏览器打印对话框未显示
- c# - 修饰符 readonly 对 get only 属性无效
- php - PHP cli脚本中shell命令的输出