How to insert information gathered by prompts in several different functions to display in a Div element in JavaScript?

Question

I am trying to gather information from a user by prompts that are each in their own functions. Each of these own functions work by themselves as I have tested them. Next I am trying to display the information in a Div using the function financialInfoDisplay(), but I am getting an following error message

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

and the prompts are not showing show in the browser. Why is this and how can I fix it?

I have even tried include the code to add the .innerHTML to the div in each function, which works, but as soon as I add another prompt to the div the first one disappears.

I have even tried to add in parameters instead of the global variables such as var userWithdrawal, userName, depositAmount into the financialInfoDisplay() and then passing those variables as arguments when calling said function but that did not work either.

//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>

Well, for one you have your code separated into two code snippets and they aren't going to see each other! — Jay, Apr 19 '19 at 04:42

Hien Nguyen · Answer 1 · 2019-04-19T06:32:50.640

You should call financialInfoDisplay inside each click event and check undefined in financialInfoDisplay and return value is not need in your case.

With your code function financialInfoDisplay() only call 1 time at load time.

You should not put in header tag, the nameBtn did not generate and can not set event handler for it.

The HTML content:

<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>

The code works when you test it above, however, it isn't working in Brackets. It's giving me a Uncaught TypeError: Cannot read property 'addEventListener' of null at init. — Aj96, Apr 19 '19 at 06:16
you must move script tag before
tag should not put in header tag — Hien Nguyen, Apr 19 '19 at 06:19
if you put in header tag, the nameBtn did not generate and can not set event handler for it — Hien Nguyen, Apr 19 '19 at 06:23
Even when I moved the script to the bottom of the page, I am still getting the same error message. — Aj96, Apr 19 '19 at 06:28
I tried to do that and also double checked the HTML you put on here by copying that over, but I'm still getting the error message. — Aj96, Apr 19 '19 at 06:53
did you try F12 and check console, i copy to html in my machine, all worked well. — Hien Nguyen, Apr 19 '19 at 06:55
Actually, I know why that error message was coming up! It was a typo! — Aj96, Apr 19 '19 at 07:03

coderdark · Answer 2 · 2019-04-19T14:16:34.137

See how i am presenting and displaying below. This is on es6.

You are getting the error: Uncaught TypeError: Cannot set property 'innerHTML' of null at financialInfoDisplay because you are firing your javascript before the html elements are created in DOM. That is the reason it can not find innerHTML property.

You may want to load your js in the body so you know you will have all the elements ready to use them in 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>

score 0 · Answer 3 · answered Apr 19 '19 at 07:05

 //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>

How to insert information gathered by prompts in several different functions to display in a Div element in JavaScript?

3 Answers3