HTML中的javascript如何使隱藏的圖像在函數調用中可見？

Question

我在結合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：我能夠改變表內的單選按鈕的標簽，這讓我覺得我應該能在表中更改其他的事情

NOTE2我創建了第三行測試，其中與燈泡圖像同一行中沒有單選按鈕，並且我嘗試在init函數而不是OnSubmitForm函數中將燈泡圖像從隱藏更改為可見。 那也不行。 這是顯示“在此處打開燈-在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
//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 ");

由於上面的編輯，是這里的人們所做的...當我在此init函數中放置以下3行時，現在將顯示所有燈泡

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

但是，當我將以上三行注釋掉時，無論將行放在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>

我嘗試使用“ 使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>

Answer 1

只是您需要更改該輸入類型的可見性。 這只鳥叫什么名字？

                 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>

Answer 2

不知道是否知道這一點，但是type =“ hidden”是用於輸入標簽的，而不是img標簽的。 它定義輸入類型，在這種情況下，它為表單而不是樣式提供隱藏的輸入。 你想做什么

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

因此，當您的JavaScript運行時，它實際上會更改標簽樣式的可見性。

HTML中的javascript如何使隱藏的圖像在函數調用中可見？

問題描述

2 個解決方案

解決方案1
3 2016-09-28 05:10:47

解決方案2
2 已采納 2016-09-28 04:52:26

HTML中的javascript如何使隱藏的圖像在函數調用中可見？

問題描述

2 個解決方案

解決方案1 3 2016-09-28 05:10:47

解決方案2 2 已采納 2016-09-28 04:52:26

解決方案1
3 2016-09-28 05:10:47

解決方案2
2 已采納 2016-09-28 04:52:26