开发者问题收集

如何插入通过几个不同的函数中的提示收集的信息以显示在 JavaScript 中的 Div 元素中？

2019-04-19
115
javascript function global-variables prompt

我试图通过提示从用户那里收集信息，每个提示都有自己的功能。正如我测试过的那样，这些功能都可以独立运行。接下来，我尝试使用函数 financialInfoDisplay() 在 Div 中显示信息，但我收到以下错误消息

Uncaught TypeError: Cannot set property 'innerHTML' of null at financialInfoDisplay

并且提示未在浏览器中显示。为什么会这样？我该如何修复？

我甚至尝试过在每个函数中包含将 .innerHTML 添加到 div 的代码，这种方法可行，但当我向 div 添加另一个提示时，第一个提示就会消失。

我甚至尝试过在 financialInfoDisplay() 中添加参数而不是全局变量（例如 var userWithdrawal、userName、depositAmount），然后在调用上述函数时将这些变量作为参数传递，但这也不起作用。 

//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>
3个回答

您应该在每个点击事件中调用 financialInfoDisplay ，并检查 financialInfoDisplay 中的未定义值，并且返回值在您的情况下是不需要的。

使用您的代码函数 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>
Hien Nguyen
2019-04-19

查看下面我是如何呈现和显示的。这是在 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>
coderdark
2019-04-19
//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>
Aj96
2019-04-19