Uncaught TypeError: Cannot read properties of undefined (reading 'parentNode')-CodePudding

I have added the following script to my web page where a newsletter sign up action can occur. I am trying to display some custom content once the user subscribes.

<script>
  function insertAfter(referenceNode, newNode) {
  referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

    var news = document.getElementsByClassName("et_pb_newsletter_success")[0].selectedIndex;
    var text = document.createTextNode("Thank you for joining our SOS Family! We are very grateful to have you with us. Thanks to compassionate people like you, SOS is meeting needs and improving the lives of our friends and neighbours in District 69. You can expect valuable emails from us on a regular basis, and you can unsubscribe at any time.");
    var learn = document.createTextNode("Learn more about SOS.")
  insertAfter(news,text);
  insertAfter(text,learn);
  
  var img = document.createElement("img");
  img.src = "https://sosd69.com/wp-content/uploads/newsletter_success.jpeg";
    
  insertAfter(learn,img);

    let btn = document.createElement("button");
    btn.innerHTML = "Watch Video";
    btn.onclick = function () {
        window.location='https://www.youtube.com/watch?v=OcYyhazCiHs';
    };
    btn.classList.add("et_pb_button_0");
  insertAfter(img,btn);
</script>

I am receiving the following console error:

Uncaught TypeError: Cannot read properties of undefined (reading 'parentNode')
    at insertAfter ((index):666)
    at (index):672

Is there an error in the way I have created the insertAfter function? Perhaps the issue is that the script is loading before the "et_pb_newsletter_success" class is created, when the subscribe button is clicked. Any insight would be much apppreciated!

CodePudding user response：

Your problem is that getElementsByClassName() returns an HTMLCollection, i.e. an array of HTML elements.

You can either call insertAfter() on each element contained in news :

var news = document.getElementsByClassName("et_pb_newsletter_success");
var text = document.createTextNode("Thank you for joining our SOS Family! We are very grateful to have you with us. Thanks to compassionate people like you, SOS is meeting needs and improving the lives of our friends and neighbours in District 69. You can expect valuable emails from us on a regular basis, and you can unsubscribe at any time.");

for(let i = 0; i < news.length; i  ) {
    insertAfter(news[i], text);
}

Or use the method querySelector() that returns the first element matching a selector :

var news = document.querySelector(".et_pb_newsletter_success");

CodePudding user response：

getElementsByClassName - gives an array, so you need to get the items from that array and use it.

var news = document.getElementsByClassName("et_pb_newsletter_success")[0];