Why I can't call a function inside another function in Javascript?

Question

I have a problem with a function Execution , I call a function inside another function but it appears an error like "Invoice is not defined" I tried some methods but didnt' work , also some value from objects not appearing on table when i want to post Any solution for this ? It will helps me so much Thanks

let bill = [
 {
   name : "Sandra",
     price : 50,
     payment : "visa",
     cardnumber:"1234 xxxx xxxx xxxx"
 },
  {
   name : "Johnson",
     price : 200,
     payment : "master",
     cardnumber:"1234 xxxx xxxx xxxx"
 },
 {
   name : "Maria",
     price : 500,
     payment : "master",
     cardnumber:"1234 xxxx xxxx xxxx"
 },
 {
   name : "Bueno",
     price : 1000,
     payment : "american-express",
     cardnumber:"1234 xxxx xxxx xxxx"
 },
]

let get  = document.querySelector(".get");
let first =  document.querySelector(".first");
let second =  document.querySelector(".second");
let third =  document.querySelector(".third");
let counter = document.querySelector("b");
let add = 0;
let table = document.querySelector("table");
table.style.display="none";
let fourth=  document.querySelector(".fourth");
let result = document.querySelector("h2");
let reven = document.querySelector("strong");

GetBills = () => {
  get.addEventListener("click" , ()=> {  
    table.style.display = "flex";
    UpdateDOM();
    let invoice= bill[Math.floor(Math.random()* bill.length)];
    let store = parseInt(bill[0].price) + parseInt(bill[1].price + 
                  parseInt(bill[2].price + parseInt(bill[3].price)));
      add++;
    if(add>bill.length) {
      add--; 
          result.innerHTML = `You have only ${bill.length} Bills,</br>buy to store to add more` ;
        reven.textContent = `Total Revenue from bills:${store} $ `;
    } else {
      console.log("Very Good")
    }
  })
}
GetBills();

UpdateDOM = () => {
  GetBills();
    counter.innerHTML=add;
  first.innerHTML =  invoice.name;
  second.innerHTML = invoice.price;
  third.innerHTML =  invoice.payment;
  fourth.innerHTML =  invoice.cardnumber;

  if(get) {
    console.log("Invoice Transacted")
  } else {
    console.log("Invoice not transacted")
  }
}

console.log(UpdateDOM());

body {
 font-family:"Lato",sans-serif;
display : flex;
align-items:center;
justify-content:center;
background-color:#f4f4f4;
flex-direction:column;
}

.get {
border:1px solid lightgray;
padding:10px 50px;
background-color:white;
box-shadow:2px #fff;
margin:20px 0;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <h1>
Get latest Bill
</h1>
<button class="get">Get</button>
<table >
  <tr>
    <th>Name</th>
    <th>Price</th> 
    <th>Payment</th>
            <th>Card Number</th>
  </tr>
  <tr>
    <td class="first"></td>
    <td class="second "></td>
    <td class="third"></td>
            <td class="fourth"></td>

  </tr>
    </table>
    <h1>
    All Bills: <b>0</b>;
    <h2>
      Result
    </h2>
    <h3>
    <strong></strong>
    </h3>
    </h1>
    <script src="script.js"></script>
  </body>
</html>

All `GetBills()` does is add another event listener to `get` and every time you click you update the Dom which adds a listener... — pilchard, Dec 21 '20 at 00:27
You've declared `invoice` within a function and with `let` scope and then are trying to use it outside of that scope in another function. — Scott Marcus, Dec 21 '20 at 00:28
The error message is clear enough. You're declaring a variable _invoice_ using the keyword `let` and then try to call it from another function — Sagar V, Dec 21 '20 at 00:29
You should move the declaration to a higher scope that both functions have access to and then `let` will be ok. — Scott Marcus, Dec 21 '20 at 00:33

Why I can't call a function inside another function in Javascript?

0 Answers0