title: Javascript to load content in HTML sometimes unless element hovered inside inspect
body: <p>I have made a widget. The content of this is loaded dynamically by JS.
  However, sometimes when a page loads the data does not show up on the widget unless it is clicked upon. Even going into inspect and hovering over any element loads the items. The two images below are before and after click.</p>
  
  <p><strong>Update 1</strong>- Click doesn't necessarily loads the data but hovering inside inspect element does.</p>
  
  <p><strong>Update 2</strong> - This seem to get fixed if I call the function to put data multiple times. Note: I have 15 sec timer to call the function, however if I reduce the interval of first 4 runs, it fixes. However, this seems like a workaround and not a solution.</p>
  
  <p><strong>Update 3</strong> - As Suggested, this appears more of a css issue
  Created a <a href="https://jsfiddle.net/sc0rp1on/4bfvcun3/" rel="nofollow noreferrer">Fiddle</a></p>
  
  <p><a href="https://i.stack.imgur.com/Ov0m7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ov0m7.png" alt="Before click/hover"></a> <a href="https://i.stack.imgur.com/Y6VgP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Y6VgP.png" alt="After Click/Hover"></a></p>
  
  <p>Here is the function that  is putting the data</p>
  
  <pre><code>function putData(dataSet) {
  if(dataSet.length == 3) {
      document.getElementById('liveBlock').style.display = 'none';
      document.getElementById('upcomingCompletedBlock').style.display = 'block';
      for(var i=1; i&lt;=3; i++) {
          title = dataSet[i-1].title;
          teams = title.split(' vs ');
          homeTeamName = teams[0];
          awayTeamName = teams[1];
          homeTeam = dataSet[i-1].homeTeamLogoUrl;
          awayTeam = dataSet[i-1].awayTeamLogoUrl;
          document.getElementById('botCupLogo'+i+'1').src=homeTeam;
          document.getElementById('botCupLogo'+i+'2').src=awayTeam;
          document.getElementById('botCupName'+i+'1').innerHTML=homeTeamName;
          document.getElementById('botCupName'+i+'2').innerHTML=awayTeamName;
  
          if(dataSet[i-1].matchStatus == 'UPCOMING') {
              var date = new Date(dataSet[i-1].startDateTime);
              document.getElementById('summaryText'+i).innerHTML = date;
          }
          else if(dataSet[i-1].matchStatus == 'COMPLETED') {
              document.getElementById('summaryText'+i).innerHTML = dataSet[i-1].summaryText;
          }
      }
  }
  </code></pre>
  
  <p>It is called by a different function which fetches data from an API. The data is correctly fetched and passed into this function</p>