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

Question

我在组合 html 和 javascript 时遇到问题，在一种情况下我可以使图像可见，而在另一种情况下我不能。

我有一个工作示例，"Switch on the Light"，其中隐藏的图像是可见的这使灯泡的图片可见 -

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

然后我尝试在示例中使用相同的想法使灯泡可见，"What is this Bird Called "。这个例子不能正常工作。

在这个例子中，我将灯泡图像放在 table 单元格中并将它们设置为隐藏。灯泡是 table 单元格中的图像，而 table 单元格在表格中。

当用户使用单选按钮单击正确答案，然后单击与 'OnSubmitForm' 关联的 'Check Answer' 按钮时，我想让灯泡可见。

在此示例中，我对信息进行了硬编码，以假设第二个答案是正确答案。

当我点击下面的第二个答案时，灯泡没有出现。我在控制台日志中没有收到任何错误 - 但灯泡不可见。

我想知道是否...

使用有一些不同并重置可见性属性——如第一个工作示例中所做的那样

和

更改表单中 table 单元格内的图像属性

或

第一个工作示例中的点击操作有些不同

注意 1 我能够更改 table 中单选按钮的标签，这让我觉得我应该能够更改 table 中的其他内容=99=]

注意 2 我创建了第三行测试，其中没有单选按钮与灯泡图像位于同一行，我尝试在我的 init 函数中而不是在 OnSubmitForm 中将灯泡图像从隐藏更改为可见功能。那也行不通。这是显示 "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>

根据建议在此处进行的编辑

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

根据建议在此处进行的编辑

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

根据建议在此处进行的编辑

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

 document.addEventListener('readystatechange', function() {
  // Seems like a GOOD PRACTICE - keeps me from getting type error I was getting

    // 

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

     function init() {

    console.log ("Init Function here ");

由于上面的编辑，由这里的人制作...当我将以下 3 行放入此 init 函数时，所有灯泡现在都会显示

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

但是当我注释掉上面的 3 行时，无论我将这些行放在 OnSubmitForm 函数中的什么位置，OnSubmitForm 都无法做到这一点，尽管它显然是因为警报和console.log测试

    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>

我尝试使用 Make html hidden input visible 中的想法，但我无法弄清楚如何使用其中的想法。我测试了下面的第三行，但它没有隐藏它。所以这可能是要做的事情，但我不知道如何合并它

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

Answer 1

不确定您是否知道这一点，但是 type="hidden" 用于输入标签而不是 img 标签。它定义了输入类型，在这种情况下，它为表单而不是样式创建了一个隐藏输入。你想做什么，

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

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

Answer 2

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

                 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
                //
                //
                 document.addEventListener('readystatechange', function() {
                  // Seems like a GOOD PRACTICE - keeps me from getting type error I was getting

                    // 

                    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>

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

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

javascript

image

hidden

visible