Can global variables be executed inside of functions?

Question

I am attempting to build a basic password app. The user "creates" a password and hits save. The screen transitions to another input box prompting the user to re-enter the password in order to login. To achieve this, I have created two functions, the first of which is the save() function that stores the value of the created password in a variable called "savePass". The second function, enter(), includes a conditional statement that compares the value of "savePass" with the variable "enterPass"(this second variable stores the value of the "enter password" input). If the two variable values match, then the modal overlay disappears and the user is essentially logged in. If the values do not match, then the overlay stays in place.

I originally set up the JavaScript so that the save() function assigns the input value to the "savePass" variable, which I declared outside of the first function in order to be visible to both the save() AND enter() functions. However, I am noticing that when I remove that global declaration ("var savePass"), the undeclared "savePass" variable inside of the save() function still seems to be accessible to the enter() function. In other words, the whole code still seems to execute properly without the global variable, even though it shouldn't.

MY QUESTION: why is the undeclared "savePass" variable visible to the second enter() function even though it's scope is limited to the save() function? How would you recommend reconfiguring the variables in this app?

JS:
var modal = document.getElementById("myModal");
//var savePass;

function save() {
  savePass = document.getElementById("savePass").value;
  document.getElementById("displayInput1").style.display = "none";
  document.getElementById("displayInput2").style.display = "block";
}

function enter() {
  var enterPass = document.getElementById("enterPass").value;
  if (enterPass === savePass) {
    modal.style.display = "none";
  } else {
    modal.style.display = "block";
  }
}

HTML:
<center>
  <h1>You successfully logged in!!!!!!!!!!!!</h1>
</center>

<div id="myModal" class="modal">

  <div class="modal-content">
    <center>
      <div id="displayInput1">
        <h3>Create Password</h3>
        <input id="savePass" class="input-lg" placeholder="create password" />
        <button class="btn-primary btn-lg" onclick="save()">Save</button>
      </div>

      <div id="displayInput2" style="display: none">
        <h3>Enter Password</h3>
        <input id="enterPass" class="input-lg" placeholder="enter password" />
        <button class="btn-primary btn-lg" onclick="enter()">enter</button>
      </div>
    </center>
  </div>
</div>

Bootstrap: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css

CSS:
body {
  font-family: Arial, Helvetica, sans-serif;
}

.modal {
  display: block;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.8);
}

.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 60%;
  min-height: 35px;
}

Answer 1

As shown in this answer, declaring variables without the var keyword as you have done here essentially makes them global. So what your code actually does is this:

var savePass;

function save() {
    savePass = document.getElementById("savePass").value;

This is actually an error in JavaScript's strict mode, and is considered bad practice. You should actually use

var savePass;

In the global scope, so your other functions can access it (as they need it).

Answer 2

Declaring a variable without the keyword var makes the variable a global variable.