HTML中的javascript如何使隐藏图像在函数调用中可见？

我在html和javascript的组合中遇到了一个问题，一种情况下我可以使图像可见，另一种情况下我不能

我有一个工作示例，“打开灯光”，其中隐藏图像可见 这使灯泡的图片可见-

但是当我注释掉上面的3行时，OnSubmitForm并没有做到这一点，不管我将这些行放在OnSubmitForm函数的哪个位置，尽管它显然是因为alert和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>

var label=document.getElementsByTagName（'label'）[0]；
label.innerHTML='Curlew'；
var label1=document.getElementsByTagName（'label'）[1]；
label1.innerHTML='Sandpiper'；
}
子表单（）上的函数
{
//当我将灯泡放在该功能的任何位置时，都不会显示灯泡
if（document.getElementById（'first'）。checked==true）
{
//警告（“您选择了第一个答案-错误”）；
log（“您选择了第一个答案-错误”）；
document.getElementById（“light1”）.style.visibility=“可见”；
}
其他的
if（document.getElementById（'second'）。checked==true）
{
警告（“您已选择第二个答案-正确”）；
//此灯泡不显示-尽管已触发上述警报
document.getElementById（“light2”）.style.visibility=“可见”；
}
//见鬼，我试着让这里的3盏灯都可见——不行
document.getElementById（“light1”）.style.visibility=“可见”；
document.getElementById（“light2”）.style.visibility=“可见”；
document.getElementById（“light3”）.style.visibility=“可见”；
返回false；
}

我试图使用来自的想法，但我不知道如何使用其中的想法。我测试了下面的第三行，但它没有隐藏它。所以这可能是应该做的事情，但我不知道如何把它结合起来

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

在此处打开一盏灯-在初始化功能内-不使用“检查答案”按钮

不确定您是否知道这一点，但type=“hidden”表示输入标记，而不是img标记。它定义了输入类型，在本例中，它为表单而不是样式生成一个隐藏的输入。你想做什么

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

---

因此，当您的javascript运行时，它实际上会改变标记样式的可见性。

不确定您是否知道这一点，但type=“hidden”表示输入标记，而不是img标记。它定义了输入类型，在本例中，它为表单而不是样式生成一个隐藏的输入。你想做什么

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

---

因此，当javascript运行时，它实际上会更改标记样式的可见性。

只需更改该输入类型中的可见性即可。 这只鸟叫什么？

height=“150”width=“100”style=“clear:left”/
答复1
答复2
在此处打开一盏灯-在初始化功能内-不使用“检查答案”按钮


//历史
//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（）{
//这似乎是一个很好的做法-防止我得到我得到的类型错误
// http://stackoverflow.com/questions/14207922/javascript-error-null-is-not-an-object
如果（document.readyState==“完成”）{
init（）；
}
});
函数init（）{
console.log（“预期更改-答案1-通过第一个按钮显示”）；
//这个灯泡也不显示。。。
document.getElementById（“light3”）.style.visibility=“可见”；
var label=document.getElementsByTagName（'label'）[0]；
label.innerHTML='Curlew'；
var label1=document.getElementsByTagName（'label'）[1]；
label1.innerHTML='Sandpiper'；
}
子表单（）上的函数
{
if（document.getElementById（'first'）。checked==true）
{
警告（“您选择了第一个答案-错误”）；
}
其他的
if（document.getElementById（'second'）。checked==true）
{
警告（“您已选择第二个答案-正确”）；
//此灯泡不显示-尽管已触发上述警报
document.getElementById（“light2”）.style.visibility=“可见”；
返回true；
}
返回false；
}

只需更改该输入类型中的可见性即可。 这只鸟叫什么？ <

    <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 ");

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

    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>

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

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

                 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>