title: Can variables have a different value depending on whether they are inside or outside of a function?
body: <p>I am trying to remove the last child paragraph from a div. I set a variable &quot;allPara&quot; to equal all the paragraphs within the div. I am removing the paragraph using myDiv.removeChild(myDiv.children [allPara.length-1]. When &quot;var allPara = document.querySelectorAll('p');&quot;  is inside the function, it removes the last paragraph added, as intended. When it is outside the function, it removes the first paragraph, p[0]. I'm adding my code with &quot;allParas=&quot; in both places I tried it. Please help me understand why i get different results based on where &quot;allPara =&quot; is. Thanks.</p>
  <pre><code>   var buttonAdd = document.querySelectorAll('button')[0];
     var buttonDelete = document.querySelectorAll('button')[1];
     var myDiv = document.querySelector('div');
     var numberOfPara = 1
   **var allPara = document.querySelectorAll('p');**
     
     buttonAdd.addEventListener('click', function(){
      numberOfPara++;
      var newPara = document.createElement('p');
      var newText = document.createTextNode(`Here is paragraph ${numberOfPara}`);
      newPara.appendChild(newText);
      myDiv.appendChild(newPara);
     });
  
     buttonDelete.addEventListener('click', function(){
      if(numberOfPara &gt; 1){
          **var allPara = document.querySelectorAll('p');**
          myDiv.removeChild(myDiv.children [allPara.length-1] );
          numberOfPara--;
      }
      else{
          alert('You are about to remove the last paragraph!')
      }
     });
  </code></pre>