title: Padding change via JS
body: <p>I need to change padding-bottom from -50% to -40%
  so, here is my CSS code</p>
  
  <pre><code>.mid {
      background-color: rgba(255,205,147,0.68);
      border-radius: 25px;
      margin-top: 18%;
      margin-right: 10%;
      margin-left: 10%;   
      padding-top: 50%;
      padding-bottom: -40%;
      background-attachment: fixed;
      box-shadow: 9px -12px 5px rgba(0,0,0,0.5);
  }
  </code></pre>
  
  <p>and here is my JS code</p>
  
  <pre><code>var expandMid = document.getElementsByClassName("mid");
  function buttonReady() {
      if (expandMid.style.padding-bottom == -40%)
          {
      mid.style.padding-bottom == -30%;
          }
          else {
          mid.style.padding-bottom = -40%;
          }
     }
  </code></pre>
  
  <p>Here is what I can see in browser console</p>
  
  <pre><code> Failed to load resource: net::ERR_FILE_NOT_FOUND
  scripts.js:3 Uncaught SyntaxError: Unexpected token )
  8index.html:72 Uncaught ReferenceError: buttonReady is not defined
      at HTMLButtonElement.onclick (index.html:72)
  </code></pre>