title: javascript from HTML How to make hidden image visible within function call?
body: <p>I'm having a problem with combined html and javascript where in one case I can make an image visible and in the other case I cannot.</p>
  
  <p>I have one working example,"Switch on the Light" , where a hidden image <strong>is</strong> made visible
      This makes the picture of a lightbulb visible - </p>
  
  <p><a href="https://i.stack.imgur.com/18g8z.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/18g8z.png" alt="enter image description here"></a>
  <a href="https://i.stack.imgur.com/Unixh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Unixh.png" alt="enter image description here"></a></p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
      &lt;html&gt;
      &lt;body&gt;
  
      &lt;center&gt;
      &lt;h1&gt;Switch on the Light&lt;/h1&gt;
  
      &lt;img id="light" src="alternateCoolBulb.jpeg" style="width:100px" &gt;
      &lt;p&gt;
  
        &lt;input type="button" id="onButton" value="Turn On the Light" /&gt;
        &lt;p&gt;
      &lt;/center&gt;
  
      &lt;/body&gt;
  
      &lt;script&gt;
  
       function init() {
        document.getElementById("light").style.visibility = "hidden";
          var onButton = document.getElementById("onButton");
          onButton.onclick = function() {
           demoVisibility() ;
          }
        }
  
      function demoVisibility() {
          document.getElementById("light").style.visibility = "visible";
      }
  
  
       document.addEventListener('readystatechange', function() {
          if (document.readyState === "complete") {
            init();
          }
        });
      &lt;/script&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p>Then I attempted to use this same idea of making the lightbulb visible in the example, "What is this Bird Called ". This example does not work right.
  <a href="https://i.stack.imgur.com/TbMrT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TbMrT.png" alt="enter image description here"></a></p>
  
  <p>In this example, I put lightbulb images in table cells and set them to be hidden. The lightbulbs are images within a table cell, and that table cell is within a form.</p>
  
  <p>I want to make the light bulb  visible when the user clicks on the correct answer using a radio button, and then clicks on the 'Check Answer' button associated with 'OnSubmitForm'.</p>
  
  <p>In this example I have hardcoded the information to assume that the second answer is the correct answer.</p>
  
  <p>When I click on the second answer in the following, the light bulb does not appear. I don't get any errors in the console log - but the lightbulb does not become visible. </p>
  
  <p>I wonder if...</p>
  
  <p>there is something different about using 
       
  and resetting the visibility attribute - as done in the first working example</p>
  
  <p>AND</p>
  
  <p>changing an image attribute inside a table cell in a form</p>
  
  <p>OR</p>
  
  <p>There is something about using the on-click in the first working example that works differently </p>
  
  <p>NOTE1 I <strong>am</strong> able to change the labels of the radio buttons within the table, that makes me think I should be able to change other things within the table</p>
  
  <p>NOTE2 I created a third row test where there is no radio button in the same row as a light bulb image and I attempt to change the light bulb image from hidden to visible within my init function, instead of within the OnSubmitForm function. That does not work either. This is the cell that shows "Turn a light on here - Within Init Function...."</p>
  
  <p><a href="https://i.stack.imgur.com/382hg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/382hg.png" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/wNHyN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wNHyN.png" alt="enter image description here"></a></p>
  
  <pre><code>&lt;html&gt;
  &lt;center&gt;
  What is this bird called?
  &lt;p&gt;
   &lt;img id = "photo" src="img/testImages/spotted Sandpipler.JPG" 
      alt="a bird"
  
   height="150" width="100"style="clear: left" /&gt;
  &lt;/center&gt;
  &lt;table&gt;
  &lt;form name="myform" onsubmit="OnSubmitForm();"&gt;
  
  &lt;tr&gt;
  &lt;td&gt;
     &lt;input type="radio" id = 'first'  name="operation" value="1"
           &gt; &lt;label for="alsoFirst"&gt; Answer 1 &lt;/label&gt;
   &lt;/td&gt;   
  
  
  
      &lt;td&gt;
  </code></pre>
  
  <p><strong>EDIT MADE HERE FROM SUGGESTION</strong></p>
  
  <pre><code>    &lt;img style="visibility: hidden;" id="light1" src="img/alternateCoolBulb.jpeg" height="52" width="42"   &gt;
      &lt;/td&gt; 
  
  &lt;/tr&gt;
  
  &lt;tr&gt;
  &lt;td&gt;     
     &lt;input type="radio" id = 'second'  name="operation" value="2"&gt;
    &lt;label for="alsoSecond"&gt;Answer 2&lt;/label&gt;
  &lt;/td&gt;
      &lt;td&gt;
  </code></pre>
  
  <p><strong>EDIT MADE HERE FROM SUGGESTION</strong></p>
  
  <pre><code>    &lt;img style="visibility: hidden;" id="light2" src="img/alternateCoolBulb.jpeg" height="52" width="42"   &gt;
      &lt;/td&gt; 
  
  &lt;/tr&gt;
  
  &lt;tr&gt;
  &lt;td&gt;
  Turn a light on here - Within init function - no use of the check answer button
  &lt;/td&gt;
  
    &lt;td&gt;
  </code></pre>
  
  <p><strong>EDIT MADE HERE FROM SUGGESTION</strong></p>
  
  <pre><code>    &lt;img style="visibility: hidden;" id="light3" src="img/alternateCoolBulb.jpeg" height="52" width="42"   &gt;
      &lt;/td&gt; 
  
  &lt;/tr&gt;
  
     &lt;p&gt;
  
     &lt;/p&gt;
  &lt;/table&gt;
    &lt;input type="submit" name="submit" value="Check Answer"&gt;
  
  &lt;/form&gt;
  
  
  
  
  &lt;script type="text/javascript"&gt;
  //history
  //https://stackoverflow.com/questions/32292962/javascript-how-to-change-radio-button-label-text
  //https://stackoverflow.com/questions/37954245/image-will-not-switch-between-hidden-and-show
  
   document.addEventListener('readystatechange', function() {
    // Seems like a GOOD PRACTICE - keeps me from getting type error I was getting
  
      // https://stackoverflow.com/questions/14207922/javascript-error-null-is-not-an-object
  
      if (document.readyState === "complete") {
        init();
      }
    });
  
       function init() {
  
      console.log ("Init Function here ");
  </code></pre>
  
  <p><strong>BECAUSE OF EDITS above, made by folks here... All light bulbs NOW display when I put the following 3 lines in this init function</strong></p>
  
  <pre><code>    document.getElementById("light3").style.visibility = "visible";  
      document.getElementById("light2").style.visibility = "visible";  
      document.getElementById("light1").style.visibility = "visible";  
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/P1RTE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/P1RTE.png" alt="enter image description here"></a></p>
  
  <p><strong>But when I comment the above 3 lines out, the OnSubmitForm does not manage to do same, no matter where I put the lines in the OnSubmitForm function, though it's obviously being invoked because of alert and console.log test</strong></p>
  
  <pre><code>    var label = document.getElementsByTagName('label') [0]; 
      label.innerHTML = 'Curlew ';
  
       var label1 = document.getElementsByTagName('label') [1]; 
      label1.innerHTML = 'Sandpiper';
  
  
      }
  
  function OnSubmitForm()
  {
  // NONE of the light bulbs display when I put them anywhere in this function
    if(document.getElementById('first').checked == true)
      {
      //alert ( "You have selected the first answer - WRONG" );  
      console.log( "You have selected the first answer - WRONG" );  
      document.getElementById("light1").style.visibility = "visible";  
  
      }
    else
      if(document.getElementById('second').checked == true)
          {
          alert ( "You have selected the SECOND answer - RIGHT" );
          // This light bulb does not display - though the alert above is triggered
          document.getElementById("light2").style.visibility = "visible";  
  
          }
      // and for the heck of it I tried making all 3 lights visible here - no go
      document.getElementById("light1").style.visibility = "visible";  
      document.getElementById("light2").style.visibility = "visible";  
      document.getElementById("light3").style.visibility = "visible";  
  
    return false;
  }
  
  &lt;/script&gt;
  
  
  
  
  &lt;/html&gt;
  </code></pre>
  
  <p>I tried to use ideas from <a href="https://stackoverflow.com/questions/17638826/make-html-hidden-input-visible">Make html hidden input visible</a>, but I could not figure out how to use the ideas in it. I tested the third line as below, but it did not hide it. So that may be the kind of thing to do, but I don't know how to incorporate it</p>
  
  <pre><code>&lt;tr&gt;
  &lt;td&gt;
  Turn a light on here - Within init function - no use of the check answer button
  &lt;/td&gt;
  
    &lt;td&gt;
  
      &lt;img type="hidden" id="light3" src="img/alternateCoolBulb.jpeg" height="52" width="42"   &gt;
      &lt;/td&gt; 
  
  &lt;/tr&gt;
  </code></pre>