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