title: How to change a two word attribute separated by dash?
body: <p>How do I change the two word attribute in html <strong>with JavaScript?</strong>
  Example: There is an example HTML page:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;script src="randomscript.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;h1 id="mywords" aria-label="Yellow"&gt;Words&lt;/h1&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Note: <code>aria-label</code> can be changed to any two word attribute (separated by dash) that fits in that context.</p>
  
  <p>Now, moving on to the JS</p>
  
  <pre><code>document.querySelector("#mywords h1").aria-label = "Blue";
  </code></pre>
  
  <p>But that doesn't seem to work, as the <code>aria-label</code> is still <code>Yellow</code>!</p>
  
  <p>How might I do this?
  Thanks.</p>
  
  <p><strong>EDIT:</strong> According to my text editor, the <code>aria</code> turns blue, the <code>-</code> turns red, but the <code>label</code> stays white. This suggests that the dash or what's after the dash is causing the problem.</p>