title: classList.toggle in Javascript
body: <p><br>
  I'm trying to assign .hidden to certain elemement when class is not present and remove class .hidden if this class is already assigned to this element. In other words - I just want to toggle class.</p>
  
  <p>I wrote code</p>
  
  <pre><code>var isHidden = document.getElementById("inputSelected").classList.toggle("hidden");
  </code></pre>
  
  <p>but it doesn't work. But when I console log classList.contains </p>
  
  <pre><code>var isHidden = document.getElementById("inputSelected").classList.contains("hidden");
  </code></pre>
  
  <p>it returns false - which means, that this class it not assigned. So why it doesn't toggle?</p>
  
  <p>More code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Kalkulator dat&lt;/title&gt;
  &lt;meta name="description" content="Kalkulator dat. Ile dni minęło od wskazanej daty? Jaka będzie data za daną ilość dni?"&gt;
  &lt;link rel="StyleSheet" type="text/css" href="style.css"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;h1&gt;Kalkulator dat&lt;/h1&gt;
  &lt;div id="daysPassed"&gt;
      &lt;h2&gt;Ile pełnych dni minęło?&lt;/h2&gt;
      &lt;form id=daysPassedForm"&gt;
          &lt;label for="firstDateDP"&gt;Data początkowa:&lt;/label&gt;
          &lt;input type="date" id="firstDate"&gt;
          &lt;fieldset&gt;
              &lt;input type="radio" id="toToday" name="todayOrSelected"&gt;    
              &lt;label for="toToday"&gt;Do dziś&lt;/label&gt;
  
              &lt;input type="radio" id="toSelected" name="todayOrSelected"&gt; 
              &lt;label for="toSelected"&gt;Do wskazanej daty&lt;/label&gt; 
              &lt;p id="inputSelected"&gt;(&lt;input type="date" id="selectedEndDate"&gt;)&lt;/p&gt;
  
          &lt;/fieldset&gt;
          &lt;input type="submit" value="Oblicz"&gt;
          &lt;/form&gt;
  &lt;/div&gt;
  
  &lt;div id="daysPassedResult" class="result"&gt;
      &lt;p id="daysPassedInfo"&gt;Od wskazanej daty minęło x dni&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div id="dateIndicate"&gt;
      &lt;h2&gt;Jaka będzie data?&lt;/h2&gt;
      &lt;form id="dateIndicateForm"&gt;
          &lt;ul&gt;
              &lt;li&gt;
                  &lt;label for="firstDateDI"&gt;&lt;span&gt;Data początkowa:&lt;/span&gt;&lt;/label&gt;
                  &lt;input type="date" id="firstDateDI"&gt;
              &lt;/li&gt;
  
              &lt;li&gt;
              &lt;label for="numberOfDays"&gt;&lt;span&gt;Liczba pełnych dni:&lt;/span&gt;&lt;/label&gt;
              &lt;input type="number" id="numberOfDays" step="1"&gt;
              &lt;/li&gt;
  
              &lt;li&gt;
              &lt;input type="submit" value="Oblicz"&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  
  &lt;div id="dateIndicateResult" class="result"&gt;
      &lt;p id="dateIndicateResult"&gt;Po x dniach od y będzie&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;script src="script.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  
  
  div {
      box-sizing: border-box;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box; 
  margin-bottom: 7px;
  }
  
  body {
  margin: 0 auto;
  width: 40%;
  background-color: #FFCA51;
  }
  
  div {
  padding: 5px;
  border-radius: 15px;
  }
  
  p {
  margin: 8px 0 8px 0;
  }
  
  ul {
  list-style-type: none;
  padding: 0;
  }
  
  h1 {
  text-align: center;}
  
  fieldset {
  border: none;
  }
  
  input {
  margin: 2px;
  padding: 1px;
  }
  
  span {
  width: 115px;
  text-align: right;
  display: inline-block;
  }
  
  
  #daysPassed {
  background-color: #E8A849;
  padding-left: 16px;
  }
  
  #inputSelected {
  margin: 0 0 0 8px;
  display: inline-block;
  }
  
  #daysPassedResult {
  background-color: #FFA75D;
  }
  
  #dateIndicate {
  background-color: #E87A49;
  padding-left: 16px;
  margin-top: 20px;
  }
  
  #dateIndicateResult {
  background-color: #FF6D51;
  }
  
  .result {
  margin: 8px 0 8px 16px;
  padding-left: 12px;
  max-width: 50%;
  }
  
  .hidden {
  display: none;}
  
  
  function preparePage() {
      document.getElementById("inputSelected").classList.toggle("hidden");
      document.getElementById("daysPassedResult").classList.toggle("hidden");
      document.getElementById("dateIndicateResult").classList.toggle("hidden");
  }
  
  window.onload = function() {
      preparePage();
  };
  </code></pre>
  
  <p>Right now second and third line of preparePage works, but first (#inputselected) doesn't</p>