CODEWITHSUNDEEP
javascriptfunctionglobal-variablesprompt
Aj96
Aj96

Reputation: 187

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

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>

Upvotes: 0

Views: 124

Answers (3)

coderdark
coderdark

Reputation: 1501

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>

Upvotes: 1

Aj96
Aj96

Reputation: 187

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

Upvotes: 0

Hien Nguyen
Hien Nguyen

Reputation: 18975

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>

Upvotes: 1

Related Questions