title: Hide/Show Image
body: <p>I am trying to hide/show an image when you click on a button. I wish to only use JavaScript, CSS, and HTML in this small project. The code I have so far is:</p>
  
  <pre><code>&lt;span id = "one"&gt;
  &lt;img src = "1.png" alt = "Picture of 1" style="display: none;"/&gt;
  &lt;/span&gt;
  
  &lt;input type="button" value="One" onclick="showOne();" /&gt;
  
  &lt;script type = "text/javascript" src= "123clickJs.js"&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>^ That is the HTML.</p>
  
  <p>Here is the JavaScript:</p>
  
  <pre><code>function showOne() {
  var img1 = document.getElementById("one");
  img1.style.display = "";
    if(img1.style.display == "inline" ) {
      img1.style.display = "none";
    }
    else {
    img1.style.display = "inline";
    }
  }
  </code></pre>
  
  <p>But for some reason, it is not toggling the image visible/hidden. Any ideas on what I might be doing wrong?</p>