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 passionate 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 = ".jpeg";
insertAfter(learn,img);
let btn = document.createElement("button");
btn.innerHTML = "Watch Video";
btn.onclick = function () {
window.location='';
};
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!
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 passionate 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./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./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!
Share Improve this question edited Dec 10, 2021 at 20:18 AC1 asked Dec 10, 2021 at 17:18 AC1AC1 732 gold badges2 silver badges7 bronze badges 2-
1
Apart from the
gEBCNissue which the answerers have handled below, there's a logical error, newly-created textnodes are not inserted to any element yet, hence they can't have a parent node. – Teemu Commented Dec 10, 2021 at 17:37 - Thank you! How would I go about appending newly created texnodes to the elements in the et_pb_newsletter_success class in this case? – AC1 Commented Dec 10, 2021 at 20:21
2 Answers
Reset to default 0getElementsByClassName - 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];
Your script looks as if it needs the entire page be loaded before it runs. Are you sure you're running the script after everything is loaded?
<head><script>function init() { //run your script ...}</script></head>
<body onload="init();"> ...