title: Click on a button to change multiple span items
body: <p>Let's say I have multiple span items such as </p>
  
  <pre><code>&lt;span&gt;A&lt;/span&gt;
  &lt;span&gt;B&lt;/span&gt;
  &lt;span&gt;C&lt;/span&gt;
  &lt;span&gt;D&lt;/span&gt;
  </code></pre>
  
  <p>and a div (which I will change to a button later) called "change". </p>
  
  <pre><code>&lt;div id="change"&gt;CHANGE&lt;/div&gt;
  </code></pre>
  
  <p>Is there a way to change the text of all the span items on the page with a single button click?</p>
  
  <p>I'm not very familiar with JavaScript and so far, I'm trying this code but it doesn't seem to work. </p>
  
  <pre><code>$(document).ready(function(){
      $('#change').click(function(){
          $("span").replaceAll(function(){
              while ('span') {
                  if ($('#span').text() == 'A') {
                      return $('span').text('B');
                  }
                  else if ($('span').text() == 'B') {
                      $('span').text('C');
                  }
                  else if ($('span').text() == 'C') {
                      $('span').text('D');
                  }
                  else if ($('span').text() == 'D') {
                      $('span').text('A');
                  }
              }
          });
      });
  });
  </code></pre>
  
  <p>Thanks in advance!</p>