title: How to change elements class with JavaScript?
body: <p>I'm making a button that will open up a list and change a class type that will change the img. </p>
  
  <p>It is for a overwatch lootbox opener and the button will open up what they have obtained. I want it so the img changes from + to - and that it will show and not show the list of what they got.</p>
  
  <p>Here is the code:</p>
  
  <p>JAVASCRIPT</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 itemLog() {
    var log = document.getElementById("log")
    var btn = document.getElementById("bt")
    alert(btn)
    alert(log)
    if (btn.class == "toggle fa fa-minus-circle") {
        btn.class = "toggle fa fa-plus-circle";
    }
    else {
      btn.class = "toggle fa fa-minus-circle";
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Home |OWLBS&lt;/title&gt;
  &lt;link rel="icon" type="image/png" href="favicon.png"&gt;
  &lt;link href="css/style.css" rel="stylesheet" type="text/css" /&gt;
  &lt;link href="css/animate.css" rel="stylesheet" type="text/css"&gt;
  &lt;link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" type=text/css&gt;
  &lt;link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,600,700' rel='stylesheet' type='text/css'&gt;
  &lt;link href='https://fonts.googleapis.com/css?family=Raleway:400,600,700' rel='stylesheet' type='text/css'&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/chance.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/loot.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/spec-loot.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/engine.js"&gt;&lt;/script&gt;
  &lt;body&gt;
  &lt;header&gt;
    &lt;nav&gt;
      &lt;div class="grid"&gt;
        &lt;div class="grid__item large--one-third logo"&gt;
            &lt;h1&gt;
              &lt;a href="index.html" class="logo"&gt;&lt;span class="loot"&gt;OW&lt;/span&gt;&lt;span class="junkie"&gt;LBS&lt;/span&gt;&lt;/a&gt;
              &lt;span class="version"&gt;This is not made by me, I edited another file!&lt;/span&gt;
            &lt;/h1&gt;
        &lt;/div&gt;
        &lt;div class="grid__item large--two-thirds medium-down--hide nav"&gt;
          &lt;ul&gt;
            &lt;li&gt;&lt;a href="about.html"&gt;About&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="changelog.html"&gt;Changelog&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/nav&gt;
  &lt;/header&gt;
  
    &lt;div class="wrapper"&gt;
      &lt;div class="grid"&gt;
        &lt;div class="grid__item item-section"&gt;
          &lt;img id="box" src="images/loot-box.png" alt="Loot Box"&gt;
          &lt;ul id="crate"&gt;&lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="small-wrapper"&gt;
      &lt;div class="grid"&gt;
        &lt;div class="grid__item center"&gt;
          &lt;a class="btn yellow" onclick="openBox()" onmouseover="shakeBox()"&gt;OPEN LOOT BOX&lt;/a&gt;
          &lt;a class="btn blue btn-toggle" onclick="itemLog()" id="log" href="#"&gt;Item Log &lt;i class="toggle fa fa-plus-circle" id="bt" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;
          &lt;div class="grid__item center"&gt;
          &lt;ul id="itemlog" style="display: block;" class="in-use"&gt;
          &lt;li id="inv0"&gt;&lt;/ul&gt;
        &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class="grid__item center"&gt;
          &lt;div class="note"&gt; Only for overwatch fans!&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>