Uncaught MissingElementError: Could not find the provided element:

[cocodcd24]

hey i take this error:

Uncaught MissingElementError: Could not find the provided element: 
    at new r (v1.js:1:18275)
    at v1.js:1:24676
    at r [as constructor] (v1.js:1:24776)
    at new r (v1.js:1:26334)
    at addStream (stream.js:42:21)
    at HTMLInputElement.onchange (stream.html:25:70)

WITH this js file :

var num = 0;
function addStream(element){
  var checkBox = element.checked
  if(checkBox){
      console.log(element.id)
      var options = {
          channel: element.id, // TODO: Change this to the streams username you want to embed
          width: 640,
          height: 360,
        };
      var secteur = num;
      //ajouterscript(element.id)
      addDiv();
      var player1 = new Twitch.Player(String.fromCharCode(secteur), options);
      player1.addEventListener(Twitch.Player.READY, initiate(player1,String.fromCharCode(secteur)));
  }else{
    console.log('not'+ element.id)
  }
}

function initiate(player,zone) {
    player.addEventListener(Twitch.Player.ONLINE, handleOnline(player,zone));
    player.addEventListener(Twitch.Player.OFFLINE, handleOffline(player,zone));
    player.removeEventListener(Twitch.Player.READY, initiate(player,zone));
  }

  function handleOnline(player,zone) {
    document.getElementById(zone).classList.remove('hide');
    player.removeEventListener(Twitch.Player.ONLINE, handleOnline(player,zone));
    player.addEventListener(Twitch.Player.OFFLINE, handleOffline(player,zone));
    player.setMuted(false);
  }

  function handleOffline(player,zone) {
    document.getElementById(zone).classList.add('hide');
    player.removeEventListener(Twitch.Player.OFFLINE, handleOffline(player,zone));
    player.addEventListener(Twitch.Player.ONLINE, handleOnline(player,zone));
    player.setMuted(false);
  }
  
  
  function addDiv() {
    var container = document.getElementById('streambox');
    var nouvelleDiv = document.createElement('div');
    nouvelleDiv.setAttribute('id',num);
    num++;
    container.appendChild(nouvelleDiv);
}

and i’m not understand, i’m a really beginner on HTML/JS so every help is cool

[BarryCarlyon]

Wheres the HTML to go along with this page?

Does this page exist somewhere to go look at?

The error suggests that String.fromCharCode(secteur) doesn’t exist as a HTML element of the given ID exists in the DOM to talk to.

And this is probably way over engineered for what you are actually trying to do, which I’m not sure of.

[cocodcd24]

Hey thank you for answer, Here is more detail :

The page is hard code
the HTML code of the page is that :

League PMU //head -> title

<header>

  <nav class="nav">

    <ul>

      <li><a href="../index.html">Home</a></li>

      <li><a href="stream.html">Streams</a></li>

      <li><a href="GuessTP.html">Guesser</a></li>

      <li class="sign"><button>s'incrire/se connecter</button></li>

    </ul>

  </nav>

</header>

<script src= "https://player.twitch.tv/js/embed/v1.js"></script>

<div id="StreamAdder" class="S">
  <input id="otplol_" type="checkbox" onchange="addStream(this)"> <label >LFL</label>
  <input id="riotgames" type="checkbox" onchange="addStream(this)" > <label>International Competition</label>
  <input id="lck" type="checkbox" onchange="addStream(this)"> <label>LCK</label>
  <input id="LEC" type="checkbox" onchange="addStream(this)"> <label>LEC</label>
  <input id="LCS" type="checkbox" onchange="addStream(this)"> <label>LCS</label>
  <input id="LPL" type="checkbox" onchange="addStream(this)"> <label>LPL</label>
  <input id="CBLOL" type="checkbox" onchange="addStream(this)"> <label>CBLOL/CBLOLA</label>
  <input id="riotgamesru" type="checkbox" onchange="addStream(this)"> <label>LCL</label>
  <input id="LCO" type="checkbox" onchange="addStream(this)"> <label>LCO</label>
  <input id="LLA" type="checkbox" onchange="addStream(this)"> <label>LLA</label>
  <input id="PCS" type="checkbox" onchange="addStream(this)"> <label>PCS</label>
  <input id="VCS" type="checkbox" onchange="addStream(this)"> <label>VCS</label>
  <input id="EBL" type="checkbox" onchange="addStream(this)"> <label>EBL</label>
  <input id="ES" type="checkbox" onchange="addStream(this)"> <label>ES</label>
  <input id="LoLIT" type="checkbox" onchange="addStream(this)"> <label>LoLIT</label>
  <input id="lckcl" type="checkbox" onchange="addStream(this)"> <label>LCKCL</label>
  <input id="LCSCL" type="checkbox" onchange="addStream(this)" > <label>LCSCL</label>
  <input id="GLL" type="checkbox" onchange="addStream(this)"> <label>GLL</label>
  <input id="LP" type="checkbox" onchange="addStream(this)"> <label>LP</label>
  <input id="NLC" type="checkbox" onchange="addStream(this)"> <label>NLC</label>
  <input id="UL" type="checkbox" onchange="addStream(this)"> <label>UltraLiga</label>
  <input id="PL" type="checkbox" onchange="addStream(this)"> <label>PrimeLeague</label>
  <input id="SUPA" type="checkbox" onchange="addStream(this)"> <label>SUPERLIGA</label>
  <input id="AL" type="checkbox" onchange="addStream(this)"> <label>AL</label>
</div>

<div id="streambox">
</div>

<div id="chat">
  chatbox bientôt
</div>

<div id="LinkStream">
  <script type="text/javascript" src="../JS/stream.js"></script>

</div>

maybe need “inspect element” because

Blockquote

And the function add div create a HTML element where id is “secteur” in the “streambox” div

[BarryCarlyon]

@cocodcd24

var player1 = new Twitch.Player(String.fromCharCode(secteur), options);

where

var secteur = num;

And num starts at 0

new Twitch.Player us trying to talk to a div of id String.fromCharCode(secteur) which equates to " " which doesn’t exist as addDiv created a div with ID of 0

Aside from that all your channel names are mostely display names rather than the login (which is all lower case) but this isn’t the problem just a side note.

[cocodcd24]

Thank for this note

and i will try to change my embed using iframe from Non-Interactive Inline Frames for Live Streams and VODs maybe less error on my code
Really thank you

[BarryCarlyon]

@cocodcd24

and i will try to change my embed using iframe from Non-Interactive Inline Frames for Live Streams and VODs maybe less error on my code

Thats not needed and if you persist the mistake of how div ID’s are generated then you’ll continue with the same issue.

As the fault is your addDiv creates a Div with a different ID to what you are telling Twitch to put the player into.

[cocodcd24]

i’ll going to rework this function too ( i change embed because i don’t really need type of embed) and thank for it

[BarryCarlyon]

@cocodcd24

( i change embed because i don’t really need type of embed)

regardless of which embed you use the player is just about the same regardless.

I just prefer using Everything to auto discover my parent.

[cocodcd24]

function addStream(element){
  var checkBox = element.checked
  if(checkBox){
      console.log(element.id);
      addIFrame(element.id);
  }else{
    console.log('not'+ element.id);
    deleteIFrame(element.id);
  }
}
    function initiate(player,zone) {
        player.addEventListener(Twitch.Player.ONLINE, handleOnline(player,zone));
        player.addEventListener(Twitch.Player.OFFLINE, handleOffline(player,zone));
        player.removeEventListener(Twitch.Player.READY, initiate(player,zone));
      }
function handleOnline(player,zone) {
  document.getElementById(zone).classList.remove('hide');
  player.removeEventListener(Twitch.Player.ONLINE, handleOnline(player,zone));
  player.addEventListener(Twitch.Player.OFFLINE, handleOffline(player,zone));
  player.setMuted(false);
}

function handleOffline(player,zone) {
  document.getElementById(zone).classList.add('hide');
  player.removeEventListener(Twitch.Player.OFFLINE, handleOffline(player,zone));
  player.addEventListener(Twitch.Player.ONLINE, handleOnline(player,zone));
  player.setMuted(false);
}


function addIFrame(player) {
  // Crée un élément iframe
  const iframe = document.createElement('iframe');
  const parentElement = document.getElementById("streambox")

iframe.id = "stream"+player;

// Spécifie l'URL de la source de l'iframe
iframe.src = "https://player.twitch.tv/?channel="+player+"&parent=127.0.0.1";

// Ajoute des attributs supplémentaires si nécessaire
iframe.width = "600"; // Largeur de l'iframe
iframe.height = "400"; // Hauteur de l'iframe
iframe.frameBorder = "0"; // Supprime les bordures de l'iframe

// Ajoute l'iframe à l'élément parent spécifié dans le document
parentElement.appendChild(iframe);}
function deleteIFrame(iframeId) {
  const iframe = document.getElementById("stream"+iframeId);
  if (iframe) {
    iframe.parentNode.removeChild(iframe);
  } else {
    console.error("L'iframe avec l'ID spécifié n'existe pas.");
  }
}

it works like this for the moment xD

have a nice day