title: How to account for user-entered typos in a JavaScript prompt?
body: <p>First off, hello! I'm new to this website so I apologize for any errors that I make posting-wise.</p>
  
  <p>I am in a web technology class where we are learning JavaScript. In a previous class we learned HTML5 and CSS. Our current assignment is to make a webpage that will either display 1 of 3 images or no images when the user enters the corresponding word in the prompt window.</p>
  
  <p>I was wondering if there was a way to account for user-entered typos? For example, I have in the code "Spn" but was wondering if there was a way to easily make it so that if a user were to enter "Son" by mistake, they would still be shown the image.
  Is there a way to do this without having to add a separate if statement?</p>
  
  <p>Below is the code I have so far, which includes my little "test" to see if I could do this. I thought it had worked when I only had two items (ex: "Spn, "spn"), but when I added a third it stopped working, and now it isn't working again. I may have very well been mistaken that there was ever a success, though.</p>
  
  <p>Oh, also, we are only allowed to use JavaScript, HTML, and CSS. So if you have a solution that is jquery (I have no idea what that is), then thank-you, but I'm afraid I can't use it.</p>
  
  <p>Please let me know if there is any other information that you need and I will gladly supply it to you. Thank-you very much for your help, I very much appreciate it!
  -Carly</p>
  
  <hr>
  
  <p><strong>JavaScript Code (file name is switch.js):</strong></p>
  
  <pre><code>var temp = "None";
  
  
  function choose()
      {
          temp = prompt("Spn, DW, SH, or None?");
  
              if (temp == "Spn","spn")
                  {
                      document.getElementById("picture").src="first.jpg";
                      document.getElementById("sub").innerHTML="Supernatural";
                      document.getElementById("picture").style.visibility="visible";
                  };
              if (temp == "DW","dw","Dw")
                  {
                      document.getElementById("picture").src="second.jpg";
                      document.getElementById("sub").innerHTML="Doctor Who";
                      document.getElementById("picture").style.visibility="visible";
                  };
              if (temp == "SH","sh","Sh")
                  {
                      document.getElementById("picture").src="third.jpg";
                      document.getElementById("sub").innerHTML="Sherlock";
                      document.getElementById("picture").style.visibility="visible";
                  };
              if (temp == "None","none")
                  {
                      document.getElementById("picture").src="blank.jpg";
                      document.getElementById("sub").innerHTML="Click button to reveal image";
                      document.getElementById("picture").style.visibility="hidden";
                  };
      }
  </code></pre>
  
  <hr>
  
  <p><strong>HTML Code (file name is userchoice.html):</strong></p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
      &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
      &lt;script src="switch.js"&gt;&lt;/script&gt;
      &lt;title&gt;What is this not working I'm going to cry&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;h1&gt;SuperWhoLock&lt;/h1&gt;
      &lt;h2 id="sub"&gt;Click button to reveal image&lt;/h2&gt;
  
      &lt;div id="picblock"&gt;
          &lt;img src="blank.jpg" id="picture"&gt;
      &lt;/div&gt;
  
      &lt;div id="buttons"&gt;
          &lt;button onclick="choose()"&gt;Choose Picture&lt;/button&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <hr>
  
  <p><strong>CSS code (the file name is style.css):</strong></p>
  
  <pre><code>body  
      { background-image:url('background.jpg');
      }
  
  
  
  
  h1
      { width: 25%;
      text-align: center;
      margin-left: auto;
      margin-right: auto;
      background: black;
      color: white;
      }
  
  h2
      { width: 25%;
      text-align: center;
      margin-left: auto;
      margin-right: auto;
      background: white;
      color: black;
      }
  
  #picblock
      { width: 25%;
      text-align: center;
      margin-left: auto;
      margin-right: auto;
      }
  
  #picture
      {visibility:hidden;
      }
  
  
  #buttons
      { text-align: center;
      margin-left: auto;
      margin-right: auto;
      }
  </code></pre>