CODEWITHSUNDEEP
javascriptimagehiddenvisible
LaurelS
LaurelS

Reputation: 492

javascript from HTML How to make hidden image visible within function call?

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.

I have one working example,"Switch on the Light" , where a hidden image is made visible This makes the picture of a lightbulb visible -

enter image description here enter image description here

    <!DOCTYPE html>
    <html>
    <body>

    <center>
    <h1>Switch on the Light</h1>

    <img id="light" src="alternateCoolBulb.jpeg" style="width:100px" >
    <p>

      <input type="button" id="onButton" value="Turn On the Light" />
      <p>
    </center>

    </body>

    <script>

     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();
        }
      });
    </script>
    </html>

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. enter image description here

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.

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'.

In this example I have hardcoded the information to assume that the second answer is the correct answer.

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.

I wonder if...

there is something different about using and resetting the visibility attribute - as done in the first working example

AND

changing an image attribute inside a table cell in a form

OR

There is something about using the on-click in the first working example that works differently

NOTE1 I am 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

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...."

enter image description here

enter image description here

<html>
<center>
What is this bird called?
<p>
 <img id = "photo" src="img/testImages/spotted Sandpipler.JPG" 
    alt="a bird"

 height="150" width="100"style="clear: left" />
</center>
<table>
<form name="myform" onsubmit="OnSubmitForm();">

<tr>
<td>
   <input type="radio" id = 'first'  name="operation" value="1"
         > <label for="alsoFirst"> Answer 1 </label>
 </td>   



    <td>

EDIT MADE HERE FROM SUGGESTION

    <img style="visibility: hidden;" id="light1" src="img/alternateCoolBulb.jpeg" height="52" width="42"   >
    </td> 

</tr>

<tr>
<td>     
   <input type="radio" id = 'second'  name="operation" value="2">
  <label for="alsoSecond">Answer 2</label>
</td>
    <td>

EDIT MADE HERE FROM SUGGESTION

    <img style="visibility: hidden;" id="light2" src="img/alternateCoolBulb.jpeg" height="52" width="42"   >
    </td> 

</tr>

<tr>
<td>
Turn a light on here - Within init function - no use of the check answer button
</td>

  <td>

EDIT MADE HERE FROM SUGGESTION

    <img style="visibility: hidden;" id="light3" src="img/alternateCoolBulb.jpeg" height="52" width="42"   >
    </td> 

</tr>

   <p>

   </p>
</table>
  <input type="submit" name="submit" value="Check Answer">

</form>




<script type="text/javascript">
//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 ");

BECAUSE OF EDITS above, made by folks here... All light bulbs NOW display when I put the following 3 lines in this init function

    document.getElementById("light3").style.visibility = "visible";  
    document.getElementById("light2").style.visibility = "visible";  
    document.getElementById("light1").style.visibility = "visible";

enter image description here

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

    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;
}

</script>




</html>

I tried to use ideas from Make html hidden input visible, 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

<tr>
<td>
Turn a light on here - Within init function - no use of the check answer button
</td>

  <td>

    <img type="hidden" id="light3" src="img/alternateCoolBulb.jpeg" height="52" width="42"   >
    </td> 

</tr>

Upvotes: 0

Views: 3278

Answers (2)

Tishbyte
Tishbyte

Reputation: 40

Not sure if you know this, but the type="hidden" is meant for the input tag and not the img tag. It defines the input type, and in this case it makes a hidden input for forms and not for styling. What you would want to do it,

<img style="visibility: hidden;" id="light3" src="img/alternateCoolBulb.jpeg" height="52" width="42"   >

Thus when your javascript runs, it actually changes the tags style visibility.

Upvotes: 2

Iqbal
Iqbal

Reputation: 291

Just you need to change the visibility in that input type. What is this bird called? 

                 height="150" width="100"style="clear: left" />
                </center>
                <table>
                <form name="myform" onsubmit="OnSubmitForm();">

                <tr>
                <td>
                   <input type="radio" id = 'first'  name="operation" value="1"
                         > <label for="alsoFirst"> Answer 1 </label>
                 </td>   
                    <td>
                    <img id="light1" src="img/alternateCoolBulb.jpeg" height="52" width="42"  style="visibility: hidden;" >
                    </td> 
                </tr>

                <tr>
                <td>     
                   <input type="radio" id = 'second'  name="operation" value="2">
                  <label for="alsoSecond">Answer 2</label>
                </td>
                    <td>
                    <img id="light2" src="img/alternateCoolBulb.jpeg" height="52" width="42" style="visibility: hidden;" >
                    </td> 

                </tr>

                <tr>
                <td>
                Turn a light on here - Within init function - no use of the check answer button
                </td>

                  <td>
                    <img style="visibility: hidden;" id="light3" src="img/alternateCoolBulb.jpeg" height="52" width="42"   >
                    </td> 

                </tr>

                   <p>

                   </p>
                </table>
                  <input type="submit" name="submit" value="Check Answer">

                </form>




                <script type="text/javascript">
                //history
                //http://stackoverflow.com/questions/32292962/javascript-how-to-change-radio-button-label-text
                //http://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

                    // http://stackoverflow.com/questions/14207922/javascript-error-null-is-not-an-object

                    if (document.readyState === "complete") {
                      init();
                    }
                  });

                 function init() {

                    console.log ("expect to change -Answer 1- displayed by first button  ");
                    // This light bulb does not display either...
                    document.getElementById("light3").style.visibility = "visible";  
                    var label = document.getElementsByTagName('label') [0]; 
                    label.innerHTML = 'Curlew ';

                     var label1 = document.getElementsByTagName('label') [1]; 
                    label1.innerHTML = 'Sandpiper';


                    }

                function OnSubmitForm()
                {
                  if(document.getElementById('first').checked == true)
                    {
                    alert ( "You have selected the first answer - WRONG" );  
                    }
                  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";  
                        return true;
                        }
                  return false;
                }


                </script>

Upvotes: 3

Related Questions