Getting Null value when page content reload

问题

Trying to create Chrome extension where it deletes particular elements from the third party website.

I'm getting an issue I want to remove a class element by getting an element by ID on the third party website and it run successfully when the whole website reload. But when the only page content update then they find the null value.

Please Note The whole page does not reload only the contents of the page reload.
Other items stay same like Heading, Descriptions, etc are same but only the episode changes.

For example, a video streaming site where the episode of videos in a list sequence and when the first episode ends the next episode reload only and starts playing. Other items stay the same heading of the videos, the name, the summary are not changed.



var temp =  document.getElementById('html5_player_id_html5');
 alert('Element temp : ' + temp);

Result: Null

var v = document.getElementsByClassName("ad-cuet");
  alert('Element temp : ' + v[0]); 
  while (v.length >0) v[0].remove();
  alert("Hello timetext remove");

Result: Undefined

document.addEventListener('DOMContentLoaded', function() {
  var link = document.getElementById('btn_click_id');
  // onClick's logic below:
  link.addEventListener('click', function() {     alert("Hello from Button click 1");
   myFunction();
  });
});   

function timedText() {   setTimeout(myTimeout, 1000) }

function myTimeout()
{ 
  var v = document.getElementsByClassName("ad-cuet");
  
  while (v.length >0) v[0].remove();
  alert('Element temp : ' + v[0]); 
  alert("Timetext remove");
}

function myFunction()
{
  // event.preventDefault();
  var temp = document.getElementById('html5_player_id');
  alert('Element html5_player_id : ' + temp); 

  if(typeof(temp) != 'undefined' && temp != null)
    {
        // temp.remove();
        alert("3 Dance4dancers chrome extenstion :");
        console.log("html5_player_id : " +  temp);
        alert('Element html5_player_id exists!');          
        timedText();
    } 
  else
   {
      if(typeof(temp) != 'undefined' && temp != null)
          {
           alert('Element null value!');   
           timedText();    
          }
            else{
                  // myFunction();
                  timedText();    
                  alert('Element does not exist!');
                }
   }
}

      /* Modal Structure */

      html,
      body {
        font-family: "Open Sans", sans-serif;
        font-size: 14px;
        margin: 0;
        min-height: 180px;
        padding: 0;
        width: 260px;
      }

      h1 {
        font-family: "Menlo", monospace;
        font-size: 22px;
        font-weight: 400;
        margin: 0;
        color: #2f5876;
      }

      a:link,
      a:visited {
        color: #000000;
        outline: 0;
        text-decoration: none;
      }

      img {
        width: 10%;
      }

      .modal-header {
        align-items: center;
        border-bottom: 0.5px solid #dadada;
      }

      .modal-content {
        padding: 0 22px;
      }

      .modal-icons {
        border-top: 0.5px solid #dadada;
        height: 50px;
        width: 100%;
      }

      .logo {
        padding: 16px;
      }

      .logo-icon {
        vertical-align: text-bottom;
        margin-right: 4px;
      }

      .version {
        color: #444;
        font-size: 18px;
      }

      .flex-container {
        display: flex;
        justify-content: space-between;
        padding: 10px 22px;
      }

      .flex {
        opacity: 1;
        transition: opacity 0.2s ease-in-out;
        width: 80px;
      }

      .flex:hover {
        opacity: 0.4;
      }

      .flex .fa {
        font-size: 30px;
        color: #2f5876;
      }

      .separator {
        width: 100%;
        border-top: 2px groove white;
        margin: 5px -5px 5px -3px;
      }

      #titletext {
      padding: 8px 8px 2px 0px;
      text-align: center;
      }

<!DOCTYPE html>
<html>
  <head>
    <title>D4d Launcher</title>
    <link rel="stylesheet" href="goog letets.css">
</head>

   <body >
    <div class="modal-header">
      <h1 id="#titletext" class="logo">
        <img class="logo-icon" src="images/icons.png " /><b> Dance 4 dancerss</b> 
      </h1>
    </div>  
    <div class="modal-content">
      <p>If you've DANCE content would like to share, just send a DM/TAG US on instagram <b>@dance4dancerss</b> & we post it. 
        Featuring dancers from around the world <i class="fa fa-globe" style="color:rgb(248, 75, 44) "></i> </p>
    </div>
    <div class="modal-icons">
      <div class="flex-container">
        <div class="flex">
          <a href="https://www.youtube.com/watch?v=q_WvEJntnJM" target="_blank">
            <i class="fa fa-youtube" style="color:rgb(248, 75, 44) "></i>
          </a>
        </div>
        <div class="flex">
          <a href="https://www.twitter.com/dance4dancers" target="_blank">
            <i class="fa fa-twitter" style="color:rgb(248, 75, 44) "></i>
          </a>
        </div>
        <div class="flex">
          <a href="https://www.instagram.com/dance4dancerss" target="_blank">
            <i class="fa fa-instagram" style="color:rgb(248, 75, 44) "></i>
          </a>
        </div>
        <div class="flex">
          <a href="https://facebook.com/dance4dancers" target="_blank">
            <i class="fa fa-facebook" style="color:rgb(248, 75, 44) "></i>
          </a>
        </div>
      </div>
      <div></div>
        <div id="separator0" class="modal-header"> 
      </div>
        <button class="btn_click" id="btn_click_id">Click</button>
      </div>
    
    <script type="text/javascript" src="popup.js"></script>
  </body>
  </html>

Where the content of the page updated rather than the whole page reupload. I searched it throughout the day today but didn't get any information anywhere.

来源：https://stackoverflow.com/questions/60773574/getting-null-value-when-page-content-reload

标签

javascript

html

css

dom-events