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

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

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

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

然后我尝试在示例“这只鸟叫什么”中使用相同的想法使灯泡可见。这个例子不能正常工作。

在此示例中，我将灯泡图像放入表格单元格中并将它们设置为隐藏。灯泡是表格单元格内的图像，而该表格单元格位于表单内。

我希望当用户使用单选按钮单击正确答案，然后单击与“OnSubmitForm”关联的“检查答案”按钮时，灯泡可见。

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

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

我想知道是否...

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

并且

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

或者

在第一个工作示例中使用点击有一些不同的工作方式

注意1我能够更改表格内单选按钮的标签，这让我认为我应该能够更改表格内的其他内容

注意2我创建了第三行测试，其中与灯泡图像在同一行中没有单选按钮，并且我尝试在 init 函数中(而不是在 OnSubmitForm 函数中)将灯泡图像从隐藏更改为可见。那也不行。这是显示“在此处打开一盏灯 - 在 Init 函数内...”的单元格

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

由于上面的编辑，由这里的人们进行...当我在此初始化函数中放入以下 3 行时，所有灯泡现在都会显示

    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>

最佳答案

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

                 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>

关于HTML 中的 javascript 如何使隐藏图像在函数调用中可见？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39738107/

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

上一篇：javascript - Bootstrap日期选择器关闭函数

下一篇：javascript - JavaScript 中的拆分和合并是如何工作的？