我试图通过提示来收集用户的信息,每个提示都在他们自己的功能中。当我测试它们时,这些自己的每个功能都可以自行工作。接下来我尝试使用函数financialInfoDisplay()在Div中显示信息,但是我收到以下错误消息
未捕获的TypeError:无法在financialInfoDisplay中设置null的属性“innerHTML”
并且提示未在浏览器中显示。为什么这样,我该如何解决?
我甚至试过将代码添加到每个函数的div中的.innerHTML,但是只要我向div添加另一个提示,第一个就消失了。
我甚至尝试将参数而不是全局变量(例如var userWithdrawal,userName,depositAmount)添加到financialInfoDisplay()中,然后在调用所述函数时将这些变量作为参数传递,但这也不起作用。
//GLOBAL VARIABLES
var userWithdrawal, userName, depositAmount;
//GETS ELEMENT FROM DOM
var $ = function (id) {
"use strict";
return window.document.getElementById(id);
};
//GETS USER NAME
function namePrompt () {
"use strict";
userName = window.prompt("Please enter your name");
return userName;
}
//GETS DEPOSIT AMOUNT
function depositAmountPrompt () {
"use strict";
depositAmount = window.prompt("Please enter the amount of money you would like to deposit");
return depositAmount;
}
//GETS WITHDRAWAL Amount
function withdrawalAmount () {
"use strict";
userWithdrawal = window.prompt("Please enter the amount of money you would like to withdrawal from your account");
return userWithdrawal;
}
//DISPLAYS THE PROMPTS WITHIN A DIV
function financialInfoDisplay() {
"use strict";
var infoDisplay = window.document.getElementById('infoDisplay').innerHTML = userName + depositAmount + userWithdrawal;
return infoDisplay;
}
financialInfoDisplay();
//HANDLES ALL EVENT LISTENERS
function init() {
"use strict";
$('nameBtn').addEventListener("click", namePrompt);
$('depositBtn').addEventListener("click", depositAmountPrompt);
$('withdrawlBtn').addEventListener("click", withdrawalAmount)
}
window.addEventListener("load", init);
<style>body {
width: 500px;
margin: 0 auto;
}
#infoDisplay {
border: 3px solid black;
height: 250px;
}
</style>
<body>
<button type="button" id="nameBtn" value>Name</button>
<button type="button" id="depositBtn">Deposit</button>
<button type="button" id="withdrawlBtn">Withdrawl</button>
<div id="infoDisplay"></div>
</body>
您应该在每次单击事件中调用financialInfoDisplay
并在financialInfoDisplay
中检查undefined,并且在您的情况下不需要返回值。
使用代码函数financialInfoDisplay()
只在加载时调用1次。
你不应该放入头标记,nameBtn没有生成,也不能为它设置事件处理程序。
HTML内容:
<style>
body {
width: 500px;
margin: 0 auto;
}
#infoDisplay {
border: 3px solid black;
height: 250px;
}
</style>
<body>
<button type="button" id="nameBtn" value>Name</button>
<button type="button" id="depositBtn">Deposit</button>
<button type="button" id="withdrawlBtn">Withdrawl</button>
<div id="infoDisplay"></div>
<script>
//GLOBAL VARIABLES
var userWithdrawal, userName, depositAmount;
//GETS ELEMENT FROM DOM
var $ = function (id) {
"use strict";
return window.document.getElementById(id);
};
//GETS USER NAME
function namePrompt() {
"use strict";
userName = window.prompt("Please enter your name");
financialInfoDisplay();
//return userName;
}
//GETS DEPOSIT AMOUNT
function depositAmountPrompt() {
"use strict";
depositAmount = window.prompt("Please enter the amount of money you would like to deposit");
//return depositAmount;
financialInfoDisplay();
}
//GETS WITHDRAWAL Amount
function withdrawalAmount() {
"use strict";
userWithdrawal = window.prompt("Please enter the amount of money you would like to withdrawal from your account");
financialInfoDisplay();
//return userWithdrawal;
}
//DISPLAYS THE PROMPTS WITHIN A DIV
function financialInfoDisplay() {
"use strict";
if (userName != undefined) {
var infoDisplay = window.document.getElementById('infoDisplay').innerHTML = userName;
}
if (depositAmount != undefined) {
var infoDisplay = window.document.getElementById('infoDisplay').innerHTML += depositAmount;
}
if (userWithdrawal != undefined) {
var infoDisplay = window.document.getElementById('infoDisplay').innerHTML += userWithdrawal;
}
//return infoDisplay;
}
//HANDLES ALL EVENT LISTENERS
function init() {
"use strict";
$('nameBtn').addEventListener("click", namePrompt);
$('depositBtn').addEventListener("click", depositAmountPrompt);
$('withdrawlBtn').addEventListener("click", withdrawalAmount)
}
window.addEventListener("load", init);
</script>
</body>
function financialInfoDisplay() {
"use strict";
if(userName != undefined){
var infoDisplay = window.document.getElementById('infoDisplay').innerHTML = userName;
}
if(depositAmount != undefined){
var infoDisplay = window.document.getElementById('infoDisplay').innerHTML += depositAmount;
}
if(userWithdrawal != undefined){
var infoDisplay = window.document.getElementById('infoDisplay').innerHTML += userWithdrawal;
}
//return infoDisplay;
}
//GLOBAL VARIABLES
var userWithdrawal, userName, depositAmount;
//GETS ELEMENT FROM DOM
var $ = function (id) {
"use strict";
return window.document.getElementById(id);
};
//GETS USER NAME
function namePrompt () {
"use strict";
userName = window.prompt("Please enter your name");
financialInfoDisplay();
//return userName;
}
//GETS DEPOSIT AMOUNT
function depositAmountPrompt () {
"use strict";
depositAmount = window.prompt("Please enter the amount of money you would like to deposit");
//return depositAmount;
financialInfoDisplay();
}
//GETS WITHDRAWAL Amount
function withdrawalAmount () {
"use strict";
userWithdrawal = window.prompt("Please enter the amount of money you would like to withdrawal from your account");
financialInfoDisplay();
//return userWithdrawal;
}
//DISPLAYS THE PROMPTS WITHIN A DIV
function financialInfoDisplay() {
"use strict";
if(userName != undefined){
var infoDisplay = window.document.getElementById('infoDisplay').innerHTML = userName;
}
if(depositAmount != undefined){
var infoDisplay = window.document.getElementById('infoDisplay').innerHTML += depositAmount;
}
if(userWithdrawal != undefined){
var infoDisplay = window.document.getElementById('infoDisplay').innerHTML += userWithdrawal;
}
//return infoDisplay;
}
//HANDLES ALL EVENT LISTENERS
function init() {
"use strict";
$('nameBtn').addEventListener("click", namePrompt);
$('depositBtn').addEventListener("click", depositAmountPrompt);
$('withdrawlBtn').addEventListener("click", withdrawalAmount)
}
window.addEventListener("load", init);
<style>body {
width: 500px;
margin: 0 auto;
}
#infoDisplay {
border: 3px solid black;
height: 250px;
}
</style>
<body>
<button type="button" id="nameBtn" value>Name</button>
<button type="button" id="depositBtn">Deposit</button>
<button type="button" id="withdrawlBtn">Withdrawl</button>
<div id="infoDisplay"></div>
</body>
看看我如何呈现和显示如下。这是在es6上。
您收到错误:Uncaught TypeError: Cannot set property 'innerHTML' of null at financialInfoDisplay
,因为您在DOM中创建html元素之前触发了javascript。这就是它无法找到innerHTML
财产的原因。
您可能希望将js加载到正文中,这样您就知道您将准备好在JS中使用它们的所有元素。
//Global Variables
let prompts = [
{text: "Please Enter Your Name", response: ""},
{text: "Please enter the amount of money you would like to deposit", response: ""},
{text: "Please enter the amount of money you would like to withdrawal from your account", response: ""}
];
//Select element
const $ = (id) => {
return document.querySelector(`#${id}`);
};
//Prompt
const prompter = (config) => {
config.response = window.prompt(config.text);
}
//Display Prompts
const displayResponses = () => {
let response = "";
prompts.forEach((prompt, idx) => {
response = response + prompt.response;
document.getElementById('infoDisplay').innerHTML = response;
});
}
//Buttons
const init = () => {
$('nameBtn').addEventListener("click",() => {
prompter(prompts[0]);
displayResponses();
});
$('depositBtn').addEventListener("click",() => {
prompter(prompts[1]);
displayResponses();
});
$('withdrawlBtn').addEventListener("click",() => {
prompter(prompts[2]);
displayResponses();
});
};
window.addEventListener("load", init);
<style>body {
width: 500px;
margin: 0 auto;
}
#infoDisplay {
border: 3px solid black;
height: 250px;
}
</style>
<body>
<button type="button" id="nameBtn" value>Name</button>
<button type="button" id="depositBtn">Deposit</button>
<button type="button" id="withdrawlBtn">Withdrawl</button>
<div id="infoDisplay"></div>
</body>
//Global Variables
let prompts = [
{text: "Please Enter Your Name", response: ""},
{text: "Please enter the amount of money you would like to deposit", response: ""},
{text: "Please enter the amount of money you would like to withdrawal from your account", response: ""}
];
//Select element
const $ = (id) => {
return document.querySelector("#"+id);
};
//Prompt
const prompter = (config) => {
config.response = window.prompt(config.text);
}
//Display Prompts
const displayResponses = () => {
let response = "";
prompts.forEach((prompt, idx) => {
response = response + prompt.response;
document.getElementById('infoDisplay').innerHTML = response;
});
}
//Buttons
const init = () => {
$('nameBtn').addEventListener("click",() => {
prompter(prompts[0]);
displayResponses();
});
$('depositBtn').addEventListener("click",() => {
prompter(prompts[1]);
displayResponses();
});
$('withdrawlBtn').addEventListener("click",() => {
prompter(prompts[2]);
displayResponses();
});
};
window.addEventListener("load", init);
<style>body {
width: 500px;
margin: 0 auto;
}
#infoDisplay {
border: 3px solid black;
height: 250px;
}
</style>
<body>
<button type="button" id="nameBtn" value>Name</button>
<button type="button" id="depositBtn">Deposit</button>
<button type="button" id="withdrawlBtn">Withdrawl</button>
<div id="infoDisplay"></div>
</body>
//GLOBAL VARIABLES
var userWithdrawal, userName, depositAmount;
//GETS ELEMENT FROM DOM
var $ = function (id) {
"use strict";
return window.document.getElementById(id);
};
//GETS USER NAME
function namePrompt () {
"use strict";
userName = window.prompt("Please enter your name");
financialInfoDisplay();
//return userName;
}
//GETS DEPOSIT AMOUNT
function depositAmountPrompt () {
"use strict";
depositAmount = window.prompt("Please enter the amount of money you would like to deposit");
//return depositAmount;
financialInfoDisplay();
}
//GETS WITHDRAWAL Amount
function withdrawalAmount () {
"use strict";
userWithdrawal = window.prompt("Please enter the amount of money you would like to withdrawal from your account");
financialInfoDisplay();
//return userWithdrawal;
}
//DISPLAYS THE PROMPTS WITHIN A DIV
function financialInfoDisplay() {
"use strict";
if(userName != undefined){
var infoDisplay = window.document.getElementById('infoDisplay').innerHTML = userName;
}
if(depositAmount != undefined){
var infoDisplay = window.document.getElementById('infoDisplay').innerHTML += depositAmount;
}
if(userWithdrawal != undefined){
var infoDisplay = window.document.getElementById('infoDisplay').innerHTML += userWithdrawal;
}
//return infoDisplay;
}
//HANDLES ALL EVENT LISTENERS
function init() {
"use strict";
$('nameBtn').addEventListener("click", namePrompt);
$('depositBtn').addEventListener("click", depositAmountPrompt);
$('withdrawlBtn').addEventListener("click", withdrawalAmount)
}
window.addEventListener("load", init);
<style>body {
width: 500px;
margin: 0 auto;
}
#infoDisplay {
border: 3px solid black;
height: 250px;
}
</style>
<body>
<button type="button" id="nameBtn" value>Name</button>
<button type="button" id="depositBtn">Deposit</button>
<button type="button" id="withdrawlBtn">Withdrawl</button>
<div id="infoDisplay"></div>
</body>
//GLOBAL VARIABLES
var userWithdrawal, userName, depositAmount;
//GETS ELEMENT FROM DOM
var $ = function (id) {
"use strict";
return window.document.getElementById(id);
};
//GETS USER NAME
function namePrompt () {
"use strict";
userName = window.prompt("Please enter your name");
financialInfoDisplay();
//return userName;
}
//GETS DEPOSIT AMOUNT
function depositAmountPrompt () {
"use strict";
depositAmount = window.prompt("Please enter the amount of money you would like to deposit");
//return depositAmount;
financialInfoDisplay();
}
//GETS WITHDRAWAL Amount
function withdrawalAmount () {
"use strict";
userWithdrawal = window.prompt("Please enter the amount of money you would like to withdrawal from your account");
financialInfoDisplay();
//return userWithdrawal;
}
//DISPLAYS THE PROMPTS WITHIN A DIV
function financialInfoDisplay() {
"use strict";
if(userName != undefined){
var infoDisplay = window.document.getElementById('infoDisplay').innerHTML = userName;
}
if(depositAmount != undefined){
var infoDisplay = window.document.getElementById('infoDisplay').innerHTML += depositAmount;
}
if(userWithdrawal != undefined){
var infoDisplay = window.document.getElementById('infoDisplay').innerHTML += userWithdrawal;
}
//return infoDisplay;
}
//HANDLES ALL EVENT LISTENERS
function init() {
"use strict";
$('nameBtn').addEventListener("click", namePrompt);
$('depositBtn').addEventListener("click", depositAmountPrompt);
$('withdrawlBtn').addEventListener("click", withdrawalAmount)
}
window.addEventListener("load", init);
<style>body {
width: 500px;
margin: 0 auto;
}
#infoDisplay {
border: 3px solid black;
height: 250px;
}
</style>
<body>
<button type="button" id="nameBtn" value>Name</button>
<button type="button" id="depositBtn">Deposit</button>
<button type="button" id="withdrawlBtn">Withdrawl</button>
<div id="infoDisplay"></div>
</body>