Quick say, I am very very new to HTML and JS, I'm assuming there is a very simple solution that I am overlooking or misunderstanding.
I am trying to create a main container that will hold all my sub containers that will have the twitch embeds and a button alongside them.
The problem I am encountering is that it looks like there is only one container that the twitch embedded code looks for, which is "twitch-embed" and it seems that it must exist in the HTML before the HTML is loaded, otherwise the stream never loads and the rest of my code doesn't load.
Is there a way to load the first while in the section of my code? Or am I misunderstanding something from the twitch API and/or how JS HTML works?
<body style="background-color:#271e27">
<input style="background-color:#362e37", "color:#000000" type="search" id="twitchName" placeholder="Enter twitch name">
<button type="button" onclick="addEmbed(document.getElementById('twitchName').value)">watch</button>
<p id="test_input"></p>
<!-- Add a placeholder for the Twitch embed -->
<div id="twitch-embed"></div>
<!-- Intended container to hold the multiple streams -->
<!-- <div id="twitch-container"></div> -->
<!-- Load the Twitch embed script -->
<script src="https://embed.twitch.tv/embed/v1.js"></script>
<script type="text/javascript">
console.log("script initi");
function addEmbed(channelName){
console.log("starting function for " + channelName);
var channelnameButtonID = channelName + "button"
var channelnameStreamDivID = channelName + 'ID'
console.log("creating button");
var butt = document.createElement('BUTTON');
butt.id=channelnameButtonID;
console.log("creating div");
var newTwitchEmbed = document.createElement('div');
newTwitchEmbed.id = "twitch-embed";
console.log("creating embed");
var embed = new Twitch.Embed("twitch-embed", {
width: 284,
height: 160,
channel: channelName,
layout: "video",
parent: ["embed.example.com", "othersite.example.com"]
});
console.log('testing channel name button id')
console.log(channelnameButtonID);
console.log("creating button listener");
butt.addEventListener('click',() => {
console.log('click');
// embed.remove();
document.getElementById(channelnameButtonID).remove();
})
// document.getElementById("channelnameStreamDivID").appendChild();
// action already performed via new twitch embed?
console.log("appending button");
document.getElementById("twitch-container").appendChild(butt);
console.log("button appended");
console.log("creating embed listener");
embed.addEventListener(Twitch.Embed.VIDEO_READY, () => {
var player = embed.getPlayer();
player.setQuality("160p");
player.setVolume("0.01");
player.play();
});
}
</script>
Okay it just took me a few minutes to realize, sorry for wasting time here.
So I just forgot to add the newly created into the "twitch-container" I created, since it wasn't really "existing" in the HTML until I appended the "twitch-embed" into the "twitch-container".