Question

我在我的电脑上制作自己的电影网页空间，我必须按钮显示电影的封面，一个隐藏封面并显示iframe，但不起作用。这是我的代码：

我的封面和iframe的php代码：

    echo '<div class="BildTrailerButton">';
               echo '<button name="Bild" id="Bildbutton" value="Cover" onClick="bild()">'."Cover".'</button>';
               echo '<button name="Trailer" id="Trailerbutton" value="Trailer" onClick="trailer()">'."Trailer".'</button>';
               echo '</div>';


               echo '<img src="'.$titel['Bilderlink'].'" title="'.$titel['FTitel'].'" class="Filmbilder" id="Bild">';

               echo '<div class="videoDiv" id="playerDiv">';
               echo '<iframe width="560" height="400" src="'.$titel['Trailerlink'].'" frameborder="0" id="player" allowfullscreen>';
               echo '</iframe>';

               echo '</div>';

这里是javascript的代码：

    <script type="text/javascript" defer>

        document.getElementById("player").style.visibility="hidden";

        function trailer(){             
                document.getElementById("Bild").style.visibility="hidden";
                document.getElementById("player").style.visibility="visible";

        }  

        function bild(){
                document.getElementById("player").style.visibility="hidden";
                document.getElementById("Bild").style.visibility="visible";        
        }


    </script>

firebug控制台出现此错误：

    TypeError: document.getElementById(...) is null
document.getElementById("player").style.visibility="hidden";

Answer 1

隐藏iframe：

document.getElementById("player").style.display = 'none';

Answer 2

感谢大家特别是Plenka。我做到了：）这是我的新代码：

Javascript：

     <script type="text/javascript" defer>



        function trailer(){             
                document.getElementById("Bild").style.visibility="hidden";
                document.getElementById("playerDiv").style.visibility="visible";

        }  

        function bild(){
                document.getElementById("playerDiv").style.visibility="hidden";
                document.getElementById("Bild").style.visibility="visible";        
        }


    </script>

和html / php代码：

    echo '<div class="BildTrailerButton">';
               echo '<button name="Bild" id="Bildbutton" value="Cover" onClick="bild()">'."Cover".'</button>';
               echo '<button name="Trailer" id="Trailerbutton" value="Trailer" onClick="trailer()">'."Trailer".'</button>';
               echo '</div>';


               echo '<img src="'.$titel['Bilderlink'].'" title="'.$titel['FTitel'].'" class="Filmbilder" id="Bild">';

               echo '<div class="videoDiv" id="playerDiv">';
               echo '<object width="560" height="315">'
                   .'<param name="movie" value="'.$titel['Trailerlink'].'"></param>'
                   .'<param name="allowFullScreen" value="true"></param>'
                   .'<param name="allowscriptaccess" value="always"></param>'
                   .'<embed src="'.$titel['Trailerlink'].'" type="application/x-shockwave-flash" width="560" height="400" allowscriptaccess="always" allowfullscreen="true"></embed>'
                   .'</object>';      
               echo '</div>';
           }

iframe隐藏，没有解决方案

2 个答案: