Javascript from HTML - How to make image visible f

This posting replaces my original challenge with a correctly working example.

I wanted to use only html and javaScript - that is where I am mostly comfortable at this stage of my education

My challenge WAS that

 - I had images within an html table
 - I wanted to display an image of a light bulb
       after the user clicked the correct radio button
       and clicked on a submit form type button (onSubmit)

I could not get the light bulb pictures to display after a correct choice

I could get the light bulb image to display outside of my onSubmit function

I initially set these light bulb images to not be visible, within the html displaying the table

I noted that, sometimes after a correct answer was chosen, the light bulb image would flash, then become non-visible again. I then searched around and saw that, indeed, the onSubmit process resets values to take on their original attributes.

Not being sophisticated, yet, with jQuery, I was unable to get the suggestions made by others to work. I finally realized I did not have to use an onSubmit type button at all (thought one of the folks who answered this suggested something along those lines, but cannot find it now - if I find it I will vote up their answer)

Note 1: I have embedded the javaScript within the html only for purposes of this example. I do keep my functions in separate files. (re: comment by one of suggestions)

Note 2: This example does not clear the radio button setting after use. That is quite do'able and there is a good example of this, which works but is not included. You can find that at How to clear radio button in Javascript?

Below is the example code that does what I was originally trying to do. Notice - I'm not using any type of form or form submit function, as that gave me problems. So the suggestions made by others, might be very helpful for someone who still needs to use forms/form checking.

<html>
<head>
    <title></title>
</head>
<body>
    <center>
        What is this bird called?
        <p><img alt="a bird" height="150" id="photo" src=
        "img/testImages/spotted%20Sandpipler.JPG" style="clear: left" width=
        "100"></p>
    </center>
    <button onclick="checkAnswer()">Check Answer</button>
    <p></p>
    <table>
        <tr>
            <td><input id='first' name="operation" type="radio" value="1">
            <label for="alsoFirst">Answer 1</label></td>
            <td><img height="52" id="light1" src="img/alternateCoolBulb.jpeg"
            style="visibility: hidden;" width="42"></td>
        </tr>
        <tr>
            <td><input id='second' name="operation" type="radio" value="2">
            <label for="alsoSecond">Answer 2</label></td>
            <td><img height="52" id="light2" src="img/alternateCoolBulb.jpeg"
            style="visibility: hidden;" width="42"></td>
        </tr>
    </table>
    <script type="text/javascript">


        //history

        //https://stackoverflow.com/questions/2554116/how-to-clear-radio-button-in-javascript

        //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() {

            var label = document.getElementsByTagName('label') [0]; 
            label.innerHTML = 'Curlew ';

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


            }



    function checkAnswer() {
       var clickedIt = "yes";
           console.log ("did I get to myNEWFunction? ", clickedIt);

          if(document.getElementById('first').checked == true)
            {
            //alert ( "You have selected the first answer - WRONG" );  
            console.log( "You have selected the first answer - WRONG" );  

            }
          else
            if(document.getElementById('second').checked == true)
                {

                console.log( "You have selected the second answer - RIGHT" );  
                document.getElementById("light2").style.visibility = "visible";  

                }

    }

    </script> 
</body>
</html>

回答1:

Instead of using

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

you could use

document.getElementById("light2").style.display = "block";

and

img style="display: none;"

回答2:

You can use jQuery in order to perform your operation (and write cleaner code)

$('#light2').css('display','block');

This basically assigns display to block.

You can setup an onClick event for a button or call this when you click something.

$('#button').on('click', function(){
//Write your logic here.
$('#light2').css('display','block');
});

回答3:

As shown in my totally revised posting of my challenge and code, I resolved my problem by eliminating an onSubmit type function. As I worked with this problem I found that this type of function resets information in the html document (DOM - is this correct use of term?) to original values. I did not want that reset to occur, because I wanted to display an, initially hidden, image once the user chose a correct answer. I changed the code to now use a regular onClick type function, and now my images stayed displayed. It does mean I have to do other things myself, such as clearing radio buttons, and perhaps more.