How do I dynamically assign a value inside an HTML element?

Ask the community
,
9

I took a third look onto your problem and tried to solve it, but could not find the end-solution. To manage this, seems to be a little bit tricky.

Perhaps i need some API-Key to get it to work, i don’t know.
This is what i can offer you so far…

<html>  
  <head>
      <title></title>
      <script src="https://apis.google.com/js/platform.js"></script>
  </head>
  <body>   
    <div id="youtubeContainer" class="" data-channel="GoogleDevelopers" data-layout="default" data-count="default"></div>    
    <script>  
    	async function createButton(recievedData) {console.log("Create new Div running...") 
          var myButtonTitle=recievedData
          //var myChannel = recievedData
          var divTitle = document.createTextNode(myButtonTitle);
          var myDIV = document.createElement("DIV");
          myDIV.id = await "youtubeContainer";
          await myDIV.appendChild(divTitle);
          document.body.appendChild(myDIV)  

          //document.getElementById("youtubeContainer").innerHTML = ('<div class="g-ytsubscribe" data-channel='+myChannel+' data-layout="default" data-count="default"></div>');
        }
        
      window.onmessage =  async (event) => {
        let recievedData = await event.data
        console.log(recievedData.substring(0,1))
        if (recievedData.substring(0,1)!=="!" && recievedData.substring(0,1)!=="{"){
          console.log(recievedData)
          await createButton(recievedData);
         
        }
        else{console.log("No data found!!!")}
      }      
    </script>  
  </body>
</html>

Set attributes this way…

//myDIV.innerHTML = '<div class="g-ytsubscribe" </div>';
//myDIV.innerHTML = '<div data-channel="LuisMetalKid" </div>';
//myDIV.innerHTML = '<div data-layout="default" </div>';
//myDIV.innerHTML = '<div data-count="default" </div>';

…or this way…

//myDIV.setAttribute("id", "youtubeContainer");
//myDIV.setAttribute("class", "g-ytsubscribe");
//myDIV.setAttribute("data-layout", "default");
//myDIV.setAttribute("data-count", "default");

…was not possible.

When using the on.message-command everything gone crazy.
Seems like there is an automatic interval given inside the YT-element, which causes problems.

I tried to resolve the issue, by using an simple if-query…

if (recievedData.substring(0,1)!=="!" && recievedData.substring(0,1)!=="{"){......

I did some testings on this site … https://www.media-junkie.com/html-test-1


The communication between website & html-component, worked, but anyway without success.

Perhaps you will find a way how to solve it, sorry.