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>
