title: Can I use an if statement to display the changes in my array (JavaScript)?
body: <p>I'm trying to make my function <code>displayValues()</code> display each value stored in the array <code>arrValues</code> each time it is called. The array undergoes a change before the second time it is called.</p>
  
  <p>I am having trouble making the output <code>text</code> display the starting values in one 
   HTML element, and then the updated values in the second element. I am not allowed to have the functions return any value. At the moment my If statement only shows the updated array. I'd like to know what's causing the <code>before</code> element to not be shown?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function start() {
      var arrValues = [5, 15, 25, 35, 45, 55, 65];
  
      document.getElementById("msg1").innerHTML="Array values before the update:";
  
      displayValues(arrValues);
  
      updateValues(arrValues);
  
      document.getElementById("msg2").innerHTML="Array values after the update:";
  
      displayValues(arrValues);
  
  }
  
  function displayValues(dispVals) {
      var i = 0;
      var text = "";
      var before = document.getElementById("before");
      var after = document.getElementById("after");
  
      while (i &lt; dispVals.length) {
          text += dispVals[i] + " ";
          i++;
      }
      
      if (before == "") {
          before.innerHTML=text;
      } else if (before != "") {
          after.innerHTML=text;
      }
  
  }
  
  function updateValues(upVals) {
      var i = 0;
  
      while (i &lt; upVals.length) {
          upVals[i] = upVals[i] + 10;
          i++;
      }
  
  }
  
  window.onload = start; </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;&lt;head&gt;
  &lt;meta http-equiv="content-type" content="text/html; charset=UTF-8"&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="description" content="Updating array values"&gt;
    &lt;meta name="keywords" content="arrays, display, update"&gt;
    &lt;meta name="author" content=""&gt;
    &lt;title&gt;&lt;/title&gt;
    &lt;script src="w8P1.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;header&gt;
    &lt;h2&gt;Arrays&lt;/h2&gt;
  &lt;/header&gt;
  &lt;article&gt;
    &lt;p&gt;&lt;span id="msg1"&gt;&lt;/span&gt;
      &lt;br /&gt;
      &lt;span id="before"&gt;&lt;/span&gt;
      &lt;br /&gt;
      &lt;span id="msg2"&gt;&lt;/span&gt;
      &lt;br /&gt;
      &lt;span id="after"&gt;&lt;/span&gt;
    &lt;/p&gt;
  
  &lt;/article&gt;
  &lt;footer&gt;&lt;p&gt;Produced by &lt;/p&gt;&lt;/footer&gt;  
  
  
  &lt;/body&gt;&lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>