HTML顯示/隱藏元素JS不工作

即時消息試圖做的是讓用戶在一個內容框中關閉廣播箱時，它會顯示下一個。當我做這個使用JavaScript，所有的箱子都在裏面對方，搞砸了這是我整個的代碼，所以你可以看到CSS等HTML顯示/隱藏元素JS不工作

<html> 
    <head> 
     <style> 
     html, body { 
      background-image:initial; 
      background-repeat-x:initial; 
      background-repeat-y:initial; 
      background-repeat:no-repeat; 
      background-attachment:initial; 
      background-position:initial initial; 
      background-position-x:initial; 
      background-position-y:initial; 
      background-origin:initial; 
      background-clip:initial; 
      background-color:#EEEEEE; 
      font-family:'Source Sans Pro', sans-serif; 
      color:#262626; 
      margin:25px; 
     } 
     .texts { 
      position:relative; 
      z-index:1; 
      -webkit-border-top-left-radius:5px; 
      border-top-left-radius:5px; 
      -o-border-top-left-radius:5px; 
      -ms-border-top-left-radius:5px; 
      -moz-border-radius-topleft:5px; 
      -webkit-border-top-right-radius:5px; 
      border-top-right-radius:5px; 
      -o-border-top-right-radius:5px; 
      -ms-border-top-right-radius:5px; 
      -moz-border-radius-topright:5px; 
      -webkit-border-bottom-right-radius:5px; 
      border-bottom-right-radius:5px; 
      -o-border-bottom-right-radius:5px; 
      -ms-border-bottom-right-radius:5px; 
      -moz-border-radius-bottomright:5px; 
      -webkit-border-bottom-left-radius:5px; 
      border-bottom-left-radius:5px; 
      -o-border-bottom-left-radius:5px; 
      -ms-border-bottom-left-radius:5px; 
      -moz-border-radius-bottomleft:5px; 
      width:25%; 
      font-family:Montserrat, sans-serif; 
      font-size:14px; 
      text-align:center; 
      border:1px solid #818181; 
      padding:10px; 
     } 
     .title { 
      margin:-10; 
      background-image:url(images/blue.png); 
      height:20px; 
      padding-bottom:10px; 
      padding-top:6px; 
      text-align:center; 
      font-family:Montserrat, sans-serif; 
      font-size:16px; 
      -webkit-border-top-left-radius:5px; 
      border-top-left-radius:5px; 
      -o-border-top-left-radius:5px; 
      -ms-border-top-left-radius:5px; 
      -moz-border-radius-topleft:5px; 
      -webkit-border-top-right-radius:5px; 
      border-top-right-radius:5px; 
      -o-border-top-right-radius:5px; 
      -ms-border-top-right-radius:5px; 
      -moz-border-radius-topright:5px; 
     } 
     .button { 
      background-image:url(images/blue.png); 
      background-repeat-x:repeat; 
      background-repeat-y:no-repeat; 
      background-repeat:repeat-x; 
      background-attachment:initial; 
      background-position:initial initial; 
      background-position-x:initial; 
      background-position-y:initial; 
      background-origin:initial; 
      background-clip:initial; 
      background-color:#000000; 
      -webkit-border-top-left-radius:5px; 
      border-top-left-radius:5px; 
      -o-border-top-left-radius:5px; 
      -ms-border-top-left-radius:5px; 
      -moz-border-radius-topleft:5px; 
      -webkit-border-top-right-radius:5px; 
      border-top-right-radius:5px; 
      -o-border-top-right-radius:5px; 
      -ms-border-top-right-radius:5px; 
      -moz-border-radius-topright:5px; 
      -webkit-border-bottom-right-radius:5px; 
      border-bottom-right-radius:5px; 
      -o-border-bottom-right-radius:5px; 
      -ms-border-bottom-right-radius:5px; 
      -moz-border-radius-bottomright:5px; 
      -webkit-border-bottom-left-radius:5px; 
      border-bottom-left-radius:5px; 
      -o-border-bottom-left-radius:5px; 
      -ms-border-bottom-left-radius:5px; 
      -moz-border-radius-bottomleft:5px; 
      color:#F0FFF0; 
      cursor:pointer; 
      border:1px solid #0774B9; 
      padding:8px 35px 8px 35px; 
     } 
     .button:hover { 
      background-image:url(images/blue_hover.png); 
      background-repeat-x:repeat; 
      background-repeat-y:no-repeat; 
      background-repeat:repeat-x; 
      background-attachment:initial; 
      background-position:initial initial; 
      background-position-x:initial; 
      background-position-y:initial; 
      background-origin:initial; 
      background-clip:initial; 
      background-color:#000000; 
     } 
     .button:active { 
      background-image:url(images/blue_click.png); 
      background-repeat-x:repeat; 
      background-repeat-y:no-repeat; 
      background-repeat:repeat-x; 
      background-attachment:initial; 
      background-position:initial initial; 
      background-position-x:initial; 
      background-position-y:initial; 
      background-origin:initial; 
      background-clip:initial; 
      background-color:#000000; 
     } 
     .label_check { 
      -webkit-appearance:none; 
      background-color:#FAFAFA; 
      box-shadow:rgba(0, 0, 0, 0.046875) 0px 1px 2px, rgba(0, 0, 0, 0.046875) 0px -15px 10px -12px inset; 
      -webkit-border-top-left-radius:50px; 
      border-top-left-radius:50px; 
      -o-border-top-left-radius:50px; 
      -ms-border-top-left-radius:50px; 
      -moz-border-radius-topleft:50px; 
      -webkit-border-top-right-radius:50px; 
      border-top-right-radius:50px; 
      -o-border-top-right-radius:50px; 
      -ms-border-top-right-radius:50px; 
      -moz-border-radius-topright:50px; 
      -webkit-border-bottom-right-radius:50px; 
      border-bottom-right-radius:50px; 
      -o-border-bottom-right-radius:50px; 
      -ms-border-bottom-right-radius:50px; 
      -moz-border-radius-bottomright:50px; 
      -webkit-border-bottom-left-radius:50px; 
      border-bottom-left-radius:50px; 
      -o-border-bottom-left-radius:50px; 
      -ms-border-bottom-left-radius:50px; 
      -moz-border-radius-bottomleft:50px; 
      display:inline-block; 
      position:relative; 
      border:1px solid #CACECE; 
      padding:6px; 
     } 
     .label_check:checked { 
      background-color:#E9ECEE; 
      color:#99A1A7; 
      box-shadow:rgba(0, 0, 0, 0.046875) 0px 1px 2px, rgba(0, 0, 0, 0.046875) 0px -15px 10px -12px inset, rgba(255, 255, 255, 0.0976563) 15px 10px -12px inset, rgba(0, 0, 0, 0.0976563) 0px 0px 10px inset; 
      border:1px solid #ADB8C0; 
     } 
     .label_check:checked::after { 
      content:' '; 
      width:6px; 
      height:6px; 
      -webkit-border-top-left-radius:50px; 
      border-top-left-radius:50px; 
      -o-border-top-left-radius:50px; 
      -ms-border-top-left-radius:50px; 
      -moz-border-radius-topleft:50px; 
      -webkit-border-top-right-radius:50px; 
      border-top-right-radius:50px; 
      -o-border-top-right-radius:50px; 
      -ms-border-top-right-radius:50px; 
      -moz-border-radius-topright:50px; 
      -webkit-border-bottom-right-radius:50px; 
      border-bottom-right-radius:50px; 
      -o-border-bottom-right-radius:50px; 
      -ms-border-bottom-right-radius:50px; 
      -moz-border-radius-bottomright:50px; 
      -webkit-border-bottom-left-radius:50px; 
      border-bottom-left-radius:50px; 
      -o-border-bottom-left-radius:50px; 
      -ms-border-bottom-left-radius:50px; 
      -moz-border-radius-bottomleft:50px; 
      position:absolute; 
      top:3px; 
      background-image:initial; 
      background-repeat-x:initial; 
      background-repeat-y:initial; 
      background-repeat:no-repeat; 
      background-attachment:initial; 
      background-position:initial initial; 
      background-position-x:initial; 
      background-position-y:initial; 
      background-origin:initial; 
      background-clip:initial; 
      background-color:#99A1A7; 
      box-shadow:rgba(0, 0, 0, 0.296875) 0px 0px 10px inset; 
      left:3px; 
      font-size:32px; 
     } 

     </style> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
     <link href="http://fonts.googleapis.com/css?family=Montserrat" 
     rel="stylesheet" type="text/css"> 
     <title>Frooloo, the free face morphing software</title> 
     <script type="text/javascript"> 
     function showStuff(id) { 
      document.getElementById(id).style.display = 'block'; 
     } 
     </script> 
    </head> 
    <body> 
     <center> 
      <h1>Logo Here!</h1> 
      <br> 
     </center> 
     <span id="1" style="display: block;"> 
      <div class="texts"> 
       <div class="title"> 
        <strong>Step 1</strong> 
        <br> 
        <br> 
       </div>Press "Allow" when you are asked for access to your camera. 
       <br> 
       <label class="label_check"> 
        <input name="sample_check1" id="sample_check1" value="1" type="radio" 
        nclick="showStuff('3'); /> 
    Done? 
     </label></div></span> 
    <br> 
         <span id=" 2 " style="display: none; "><div class="texts "> 

             <div class="title " > 
         <strong>Step 2</strong><br><br> 
        </div> 

    Make sure your webcam is facing you and your volume is up, so you can hear the beep to let you know analyzing is done.<br> 
    <label class="label_check " > 
     <input name="sample_check2 " id="sample_check2 " value="1 
        " type="radio " onclick="showStuff('3'); />Done?</label> 
      </div> 
     </span> 
     <br> 
     <span id="3" style="display: none;">" 
      <div class="texts"> 
       <div class="title"> 
        <strong>Step 3</strong> 
        <br> 
        <br> 
       </div>A black dot will appear in the area to the right, stare at that black 
       dot and DO NOT move your head, the software is analyzing your face. You 
       can move after you hear a beep. This process will start when you check 
       the box below. 
       <br> 
       <label class="label_check"> 
        <input name="sample_check3" id="sample_check3" value="1" type="radio" 
        />Ready?</label> 
      </div> 
     </span> 
     <div class="img"> 
      <img src="images/dot.png" img="" style="position:absolute; left:610px; top:120px; "> 
     </div> 
     <script> 
     $('body').hide(); 
     $('body').fadeIn(1000); 
     </script> 
     <script type="text/javascript" src="http://www.google-analytics.com/ga.js"></script> 
     <script type="text/javascript"> 
     var pageTracker = _gat._getTracker("UA-301801-11"); 
     pageTracker._trackPageview(); 
     </script> 
    </body> 

</html>

下面是做到這一點的代碼部分：

<center> 
    <h1>Logo Here!</h1> 
    <br> 
</center> 
<span id="1" style="display: block;"> 
    <div class="texts"> 
     <div class="title"> 
      <strong>Step 1</strong> 
      <br> 
      <br> 
     </div>Press "Allow" when you are asked for access to your camera. 
     <br> 
     <label class="label_check"> 
      <input name="sample_check1" id="sample_check1" value="1" type="radio" 
      onclick="showStuff('2'); /> 
    Done? 
     </label></div></span> 
    <br> 
         <span id=" 2 " style="display: none; 
      "><div class="texts "> 

             <div class="title " > 
         <strong>Step 2</strong><br><br> 
        </div> 

    Make sure your webcam is facing you and your volume is up, so you can hear the beep to let you know analyzing is done.<br> 
    <label class="label_check " > 
     <input name="sample_check2 " id="sample_check2 " value="1 
      " type="radio " onclick="showStuff('3'); />Done?</label> 
    </div> 
</span> 
<br> 
<span id="3" style="display: none;">" 
    <div class="texts"> 
     <div class="title"> 
      <strong>Step 3</strong> 
      <br> 
      <br> 
     </div>A black dot will appear in the area to the right, stare at that black 
     dot and DO NOT move your head, the software is analyzing your face. You 
     can move after you hear a beep. This process will start when you check 
     the box below. 
     <br> 
     <label class="label_check"> 
      <input name="sample_check3" id="sample_check3" value="1" type="radio" 
      />Ready?</label> 
    </div> 
</span>

這裏是JS功能，

<script type="text/javascript"> 
    function showStuff(id) { 
     document.getElementById(id).style.display = 'block'; 
    } 
</script>

這是發生了什麼，去這個鏈接查看http://188.165.208.144/~seegee/planz/real/morph.php

有3個內容框相互疊加，但當我這樣做時，這就發生了，是的，黑點被認爲是在那裏......

來源

2012-08-14 user1307079

這是一個可怕的很多代碼，我們在看。你如何將問題領域變成更小的東西。你可以很好地解決你自己的問題... – 2012-08-14 20:44:08

第二個代碼塊是問題區域，我只包含第一個塊，以防止任何人看到該CSS。 – user1307079 2012-08-14 20:45:43

'sample_check1'元素存在拼寫錯誤。 'nclick'應該是'onclick'。 – 2012-08-14 20:47:20

ID和名稱標記必須以字母（[A-Za-z]），後面跟隨任意數量的字母，數字（[0-9]），連字符（「 - 」），下劃線（「_」），冒號（「：」），和句點（「。」）。

來源

2012-08-14 20:46:58

標識不應以數字開頭（請參閱此post）。除此之外，當使用內聯元素（<span>）包裝塊元素（<div>）時，您可能在各種瀏覽器中遇到問題。

你的onclick缺少報價：onclick="showStuff('2');應該onclick="showStuff('2');"

來源

2012-08-14 20:47:35 scrappedcola

好吧，我得到了那個工作，謝謝你們，順便說一句，有沒有人有任何想法，如果你現在去鏈接，多餘的報價只是從第3步開始？ – user1307079 2012-08-14 20:58:18

Scrappedcola是正確的。

關於第二個問題，有一個額外的報價，因爲你有

<span id="a3" style="display: none;">"<div class="texts" >

來源

2012-08-14 21:04:01 Oriol

HTML顯示/隱藏元素JS不工作

回答

相關問題