title: Change text in multiple divs with same class onclick
body: <p>I have a list of football matches and would like to replace all scores with "?-?" when pressing a button and toggle back to show the score when pressing again.</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-css lang-css prettyprint-override"><code>div {
    display: table;
  }
  
  div div {
    display: table-row;
  }
  
  div div div {
    display: table-cell;
  }
  
  .score {
    color: blue;
    padding: 10px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;button&gt;Hide scores!&lt;/button&gt;
  &lt;br&gt;  &lt;br&gt;
  &lt;div class="table"&gt;
  
    &lt;div class="match"&gt;
      &lt;div class="team1"&gt;Manchester United&lt;/div&gt;
      &lt;div class="score"&gt;1-1&lt;/div&gt;
      &lt;div class="team2"&gt;Liverpool&lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="match"&gt;
      &lt;div class="team1"&gt;Juventus&lt;/div&gt;
      &lt;div class="score"&gt;2-0&lt;/div&gt;
      &lt;div class="team2"&gt;Inter Milan&lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="match"&gt;
      &lt;div class="team1"&gt;Real Madrid&lt;/div&gt;
      &lt;div class="score"&gt;1-4&lt;/div&gt;
      &lt;div class="team2"&gt;Barcelona&lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="match"&gt;
      &lt;div class="team1"&gt;Dortmund&lt;/div&gt;
      &lt;div class="score"&gt;3-0&lt;/div&gt;
      &lt;div class="team2"&gt;Bayern Munich&lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="match"&gt;
      &lt;div class="team1"&gt;PSG&lt;/div&gt;
      &lt;div class="score"&gt;0-1&lt;/div&gt;
      &lt;div class="team2"&gt;Marseille&lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I have experimented with getElementById and innerHTML, but due to the large number of matches I would prefer to use getElementsByClassName instead. I've seen people recommending querySelectorAll() for this, but I can't get the scripts to work.</p>
  
  <p>An alternative would be to run a script replacing all numbers with a question mark inside divs with the same class. </p>
  
  <p>Please help me out by using <a href="https://jsfiddle.net/81sLsgnc/" rel="nofollow noreferrer">this fiddle</a></p>