Skip to main content

Hi, 

I am brand new here and am trying a few things out. I have created a widget to add the user name, rank and the current page to a widget in the sidebar. The Javascript works and I can step through the process in debug mode) to see the values added to the labels. But once the page is fully loaded, the values disappear. 

Excuse the code (it was quickly hacked together), but here is what I am using…

 

<label id="userLabel"></label>
<br>
<label id="rankLabel"></label>
<br>
<label id="currPageLabel"></label>

<script>

  const jsonData = window.inSidedData;
  const userLabel = document.getElementById("userLabel");
  const rankLabel = document.getElementById("rankLabel");
  const currPageLabel = document.getElementById("currPageLabel");

  userLabel.textContent = `User: ${jsonData.user.name}`;
  rankLabel.textContent = `Rank: ${jsonData.user.rankName}`;
  currPageLabel.textContent = `Current Page: ${jsonData.page.url}`;
 </script>

I can see that each of the labels is populated correctly by checking the values during debugging and looking at the page as I step through. But on ca complete load, they disappear.

Any ideas?

My mistake. I didn’t consider waiting for the DOM to be fully loaded. For anyone else experiencing this, this is the change I made…

 

  <label id="userLabel"></label>
  <br>
  <label id="rankLabel"></label>
  <br>
  <label id="currPageLabel"></label>

  <script>

  document.addEventListener("DOMContentLoaded", function() {  

    const jsonData = window.inSidedData;
    const userLabel = document.getElementById("userLabel");
    const rankLabel = document.getElementById("rankLabel");
    const currPageLabel = document.getElementById("currPageLabel");

    userLabel.textContent = `User: ${jsonData.user.name}`;
    rankLabel.textContent = `Rank: ${jsonData.user.rankName}`;
    currPageLabel.textContent = `Current Page: ${jsonData.page.url}`;

});

  </script>

 

Reply


Terms & ConditionsCookie settings