title: Is there a simpler way to check radio buttons?
body: <p>I'm new to coding and learning HTML as well as JavaScript. I wrote a set of radio buttons in HTML so that you could toggle an option and click the submit button, and it would use JS to display the option you chose below. The code works fine, however:</p>
  <ol>
  <li>The code is quite clunky, I'm positive there must be a much more effective way of writing this code.</li>
  <li>I didn't use the form tag, should I? I'm still not entirely sure what form does other than I know it's used to collect data somehow</li>
  </ol>
  <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>var x;
  
  function displayText() {
    if (document.getElementById("lsd").checked === true) {
      x = document.getElementById("lsd").value;
      document.getElementById("output").innerHTML = x;
    } else if (document.getElementById("shrooms").checked === true) {
      x = document.getElementById("shrooms").value;
      document.getElementById("output").innerHTML = x;
    } else if (document.getElementById("dmt").checked === true) {
      x = document.getElementById("dmt").value;
      document.getElementById("output").innerHTML = x;
    } else if (document.getElementById("peyote").checked === true) {
      x = document.getElementById("peyote").value;
      document.getElementById("output").innerHTML = x;
    } else if (document.getElementById("toad").checked === true) {
      x = document.getElementById("toad").value;
      document.getElementById("output").innerHTML = x;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p&gt;What's your preferred psychedelic substance?&lt;/p&gt;
  &lt;input type="radio" id="lsd" name="drugs" value="lsd"&gt;
  &lt;label for="lsd"&gt;LSD&lt;/label&gt;
  &lt;br&gt;
  &lt;input type="radio" id="shrooms" name="drugs" value="shrooms"&gt;
  &lt;label for="shrooms"&gt;Magic Mushrooms/psilocybin&lt;/label&gt;
  &lt;br&gt;
  &lt;input type="radio" id="dmt" name="drugs" value="dmt"&gt;
  &lt;label for="dmt"&gt;DMT&lt;/label&gt;
  &lt;br&gt;
  &lt;input type="radio" id="peyote" name="drugs" value="peyote"&gt;
  &lt;label for="peyote"&gt;Peyote&lt;/label&gt;
  &lt;br&gt;
  &lt;input type="radio" id="toad" name="drugs" value="toad"&gt;
  &lt;label for="toad"&gt;The Toad/5-MeO-DMT&lt;/label&gt;
  &lt;br&gt;
  &lt;button onclick="displayText()"&gt;Submit!&lt;/button&gt;
  &lt;p&gt;
    User's favorite drug is: &lt;span id="output"&gt;&lt;/span&gt;
  &lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>