Need help with customalert that it would read on a normal page, but not in WordPress

by

It seems that some elements that you’re referencing to on your JavaScript, do not exist by the time you execute the code.

Elements that should exist before the JavaScript:

  • dialogoverlay
  • dialogbox
  • dialogboxhead
  • dialogboxbody
  • dialogboxfoot

Based on the error message, these elements DO exist:

  • dialogoverlay
  • dialogbox

A few questions to clarify

  • Did you check if the elements exist by the time you execute your JavaScript? (dialogboxhead, dialogboxbody, dialogboxfoot)
  • Are those elements created via JavaScript or did you add them directly to your html page?
    • If you add them directly, did you add them to the php page or via WYSIWYG?

First Test

  1. Open Google Chrome
  2. Load your web page
  3. Open Google DevTools (F12 -or- Ctrl+Shift+I -or- Menu icon > More Tools > Developer Tools)
  4. This will take you to the Elements tab which contains the loaded HTML and in page JavaScript
  5. Click on any Element and then press Ctrl+F to open the search box.
  6. Type the ID with the symbol # before it. E.g. #dialogoverlay (Do this for each ID)
  7. Check if the search finds anything. If it does not, that’s the issue.

Second Test

Replace your code and see what happens (I didn’t test this code, just give it a try)

function CustomAlert(){
this.render = function(dialog){
    var winW = window.innerWidth;
    var winH = window.innerHeight;
    var dialogoverlay = document.getElementById('dialogoverlay');
    var dialogbox = document.getElementById('dialogbox');
    dialogoverlay.style.display = "block";
    dialogoverlay.style.height = winH+"px";
    dialogbox.style.left = (winW/2) - (550 * .5)+"px";
    dialogbox.style.top = "100px";
    dialogbox.style.display = "block";
    // ---> CODE CHANGES FROM HERE
    dialogbox.innerHTML = "<div id='dialogboxhead' style="color:red; background-color: yellow;"><a>Test 2</a></div>" +
        "<div id='dialogboxbody' style="color:red; background-color: yellow;">" + dialog + "</div>" +
        "<div id='dialogboxfoot' style="color:red; background-color: yellow;"><div class="alertokbtn"><button onclick='Alert.ok()'>OK!!!!!!</button></div></div>";
    // <--- TO HERE
}
this.ok = function(){
    document.getElementById('dialogbox').style.display = "none";
    document.getElementById('dialogoverlay').style.display = "none";
    window.location.innerHTML = dialog;
}
}
var Alert = new CustomAlert();