Why is my global variable undefined inside function?

Question

I made var display_val = document.case.display.value; and this variable is called inside function:

run0() {
    var display_val = document.case.display.value;
    display_val  += "0"
    queue.push('0')
};

My code doesn't work and the console gives me the following error:

Uncaught TypeError: Cannot read property 'display' of undefinedat main.js:72

js:72 is var display_val = document.case.display.value;

Full html code

<html>
<head>
    <!--Copyright 2019, Aleksa Kovacevic, All rights reserved.-->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="Online calculators for everything. Some solve problems, some satisfy curiosity." />
    <meta name="keywords" content="calculator, mortgage, loan,lease, cooking, math, college tuition, agriculture, finance,fractions,love,scientific, design, health, unit converter, pocket, running, calculators" />
    <link rel="icon" href="https://www.apkmirror.com/wp-content/uploads/2017/11/5a0aad10ea5ec.png">
    <title id= "Title">Calculator </title>
    <link href="https://fonts.googleapis.com/css?family=Inconsolata&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="main.css" type="text/css">
     <link rel="stylesheet" href="Notiflix\node_modules\notiflix\dist\notiflix-1.8.0.min.css" />
     <script src="Notiflix\node_modules\notiflix\dist\notiflix-aio-1.8.0.js""></script>

        <script src="main.js" type="text/javascript"></script>
</head>
<body>
<button type="button" id="Git" onclick="Git()"> GitHub</button>
<div id="wrapper">
<form name="case" > <!--Buttons -->
      <input name="display" id="display" placeholder "0" onkeypress="" autofocus readonly>
    <input type="button" class="oper" value="(" onclick="runLB()">
    <input type="button" class="oper" value=")" onclick="runRB()">
    <input type="button" id="back"  class="oper"  value="CE" onclick="runBack()">
   <input type="button" id="divide"  class="oper"  value="÷" onclick="runDivide()" >

    <input type="button" class="digit" value="1" onclick="run1()">
    <input type="button" class="digit" value="2" onclick="run2()">
    <input type="button" class="digit" value="3" onclick="run3()">
    <input type="button" id="multiply"  class="oper"  value="×" onclick="runMultiply()">

    <input type="button" class="digit" value="4" onclick="run4()">
    <input type="button" class="digit" value="5" onclick="run5()">
    <input type="button" class="digit" value="6" onclick="run6()">
    <input type="button" id="minus" class="oper"  value="-" onclick="runMinus()" >

    <input type="button" class="digit" value="7" onclick="run7()">
    <input type="button" class="digit" value="8" onclick="run8()">
    <input type="button" class="digit" value="9" onclick="run9()">
    <input type="button" id="plus"  class="oper"  value="+"  onclick="runPlus()">

    <input type="button" class="digit" value="0" onclick="run0()">
    <input type="button" id="comma" class="digit" value="." onclick="runComma()">
    <input type="button" id="equal"  class="oper" value="=" onclick="runEquals()">
<div id="Cal">
<textarea  id ="TE" placeholder="Note"></textarea>
</div>
<div id="newpos">
    <!-- button rainbow -->
<button type="button" id="Note" onclick="myFunction()"> Note</button></div>

</form>
<div id="new">
<!--result textarea-->
<textarea  id="result" placeholder="History" readonly></textarea>
<button type="button" id="Del" onclick="Del()"> Delete</button>
<button type="button" id="Print" onclick="printTextArea()" > Print</button>
<button type="button" id="FP" onclick="FontP()" >Font +</button>
<button type="button" id="FM" onclick="FontM()" >Font -</button>
<button type="button" id="SaveBtn" onclick="SaveBtn" >Save</button>
</div>
</div>
</body>

Any informations will help me

The error is simple. `document.case` is undefined. You can't read a `display` property from something that's not defined. — Andy, Aug 13 '19 at 10:38
Never heard about `document.case`. Can you please provide a documentation for it couldn't find anywhere on google — Black Mamba, Aug 13 '19 at 10:38
why are you accessing a property from `document` named "case" ? The value of `document.case` is undefined. — Alex Pappas, Aug 13 '19 at 10:39
Can you please add your HTML if you do not understand the comments — Krishna Prashatt, Aug 13 '19 at 10:40
The names of the elements are not converted to properties of `document`. Because `display` here is an id of the particular element, just do `var display_val = document.getElementById('display').value;`. — Teemu, Aug 13 '19 at 11:58
@Teemu now get error : `main.js:97 Uncaught TypeError: Cannot read property 'value' of null at main.js:97` — volimtvojukevu, Aug 13 '19 at 12:01
That line probably relies on the same inexisting feature as the line 72 causing an error you have originally asked. — Teemu, Aug 13 '19 at 12:04
Store the reference to the display element into a variable, and use that variable everywhere you need to change the value of the display. — Teemu, Aug 13 '19 at 12:14

score -2 · Answer 1 · answered Aug 13 '19 at 10:54

-2

display_val is a global variable.

To use it inside a function you have to use this.display_val instead of var

answered Aug 13 '19 at 10:54

Chetna Agarwal

1

1

Do you think this has anything to do with the error mentioned by OP? – Krishna Prashatt Aug 13 '19 at 10:59
This is not the case as the variable definition is inside the closure of function. – Alex Pappas Aug 14 '19 at 02:07

Why is my global variable undefined inside function?

1 Answers1