HTMLでjavascriptを使用してツイッチプレイヤーのオン/オフを切り替えようとしています

Question

自分のウェブサイトを一から作成するためのHTML5のことを学びたいと思っています。私が試したかったのは、ウェブページにツイッチチャットとプレイヤーを置くことでした。プレーヤーがいなくてページを開始し、プレイヤー+チャットをオンまたはオフにするのに使用できるボタンを使用することができます。この周りに私の頭をラップしようとしていると私は私が探している解決策を見つけることができません。感謝するでしょう、どのようにそれを行うにはヒントやヒント、ありがとう！

<a href=" javascript:player()">Display/Hide Player</a> 
<a href=" javascript:chat()">Display/Hide Chat</a> 

<script> 

var playeron = false; 
function player() 
{ 
    if(playeron==false) 
    { 
     playeron=true; 
     document.getElementById("MyPlayer").style.display="block"; 
    } 
    else 
    { 
     playeron=false; 
     document.getElementById("MyPlayer").style.display="none"; 
    } 
} 

var chaton=false; 
function chat() 
{ 
    if(chaton==false) 
    { 
     chaton=true; 
     document.getElementById("MyChat").style.display="block"; 
    } 
    else 
    { 
     chaton=false; 
     document.getElementById("MyChat").style.display="none"; 
    } 
} 
</script> 

<iframe id = "MyPlayer" src="https://player.twitch.tv/?volume=0.32&channel=blackdahlia1147" width="1280" height="720"></iframe> 

<iframe id = "MyChat" src="https://www.twitch.tv/blackdahlia1147/chat?popout=" width="300" height="720"></iframe> 

Answer 1

<script> 
var playeron=false; 
var chaton=false; 
function player(){ 
if(playeron==false){ 
playeron=true; 
document.getElementById("MyPlayer").style.display="block"; 
}else{ 
playeron=false; 
document.getElementById("MyPlayer").style.display="none"; 
} 
} 
//try it yourself for chat 
</script> 




<a href=" javascript:player()">Display/Hide player</a> 
<a href=" javascript:chat()">Display/Hide Chat</a> 
<style> 
iframe{ 
display:none; 
} 
</style> 

Answer 2

私はあなたのコードを実行し、私はあなたがもし他のループ内のリンクを持つ変数を使用しようとしていることがわかりました。さて、あなたが検索するループのオプションを作成しました。これは、ユーザーが検索する複数のチャンネルを作成する場合に便利です。

他 { プレイヤー=「https://player.twitch.tv/?volume=0.32&channel=blackdahlia1147」 チャット=「https://www.twitch.tv/blackdahlia1147/chat?popout=」 }あなたが最初に何をする必要があるか

追加することを学ぶであるあなただけそれらの2つのチャネルをしたい場合は、あなたのHTMLの中に「プラグイン」。あなたの "プレーヤー"と "チャット"はウェブサイトへのリンクであり、 "プラグイン"はあなたが探しているものです。あなたの「プラグイン」を取得するときに書き、ユーチューブやタイプ「プラグイン」に移動します：

<iframe src="plugin"></iframe> 

あなたは本当にこの時点でJSを必要としません。

"Onclick"もあなたが探しているものです。 w3school.comにアクセスすると、ボタンやアニメーションのオプションが豊富に用意されています。

Answer 3

あなたが/表示を非表示にするには、より多くのものを作りたい場合は、この柔軟性の利点と、あなたのために動作しますfunction twitch(toggle)

Answer 4

<a href="javascript:toggle('MyPlayer')">Display/Hide Player</a> 
<a href="javascript:toggle('MyChat')">Display/Hide Chat</a> 
<iframe id="MyPlayer" src="https://player.twitch.tv/?volume=0.32&channel=blackdahlia1147" width="1280" height="720" style="display: block;"></iframe> 
<iframe id="MyChat" src="https://www.twitch.tv/blackdahlia1147/chat?popout=" width="300" height="720" style="display: block;"></iframe> 

<script> 
    function toggle(id) { 
    var elem = document.getElementById(id); 
    if (elem.style.display != 'none') { 
     elem.style.display = 'none'; 
    } else { 
     elem.style.display = 'block'; 
    } 
    } 
</script> 

後に開口部ブラケットを逃しました。