0

I made a custom alert script that works in a regular html website, but not on WordPress (WordPress is very picky on what it likes and doesn't like). This is my code:

    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";
    document.getElementById('dialogboxhead').innerHTML = '<a>test</a>'
    document.getElementById('dialogboxbody').innerHTML = dialog;
    document.getElementById('dialogboxfoot').innerHTML = '<div class="alertokbtn"><button onclick="Alert.ok()">OK</button></div>';
}
this.ok = function(){
    document.getElementById('dialogbox').style.display = "none";
    document.getElementById('dialogoverlay').style.display = "none";
    window.location.innerHTML = dialog;
}
}
var Alert = new CustomAlert();

And I run this script with <button class="button" onClick="Alert.render('Alert test.');" id="btn1">Get alert</button>. I know it is doing something, because when I press the button, it gives me errors in the debugger. These are my errors, if it helps:

Uncaught TypeError: Cannot set property 'innerHTML' of null
at CustomAlert.render (customalert.js:12)
at HTMLButtonElement.onclick ((index):76) 

Uncaught TypeError: Cannot read property 'style' of null
at CustomAlert.render (customalert.js:7)
at HTMLButtonElement.onclick ((index):76)

Thanks :)

Link add code:

function CustomAlert(){
this.render = function(dialog, redirect){
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";

dialogbox.innerHTML = "<div id='dialogboxhead'><a>Test</a></div>" +
    "<div id='dialogboxbody'>" + dialog + "</div>" +
    "<div id='dialogboxfoot'><div class='alertokbtn'><button onclick='Alert.ok(" + redirect + ")'>OK</button></div></div>";

}
this.ok = function(redirect2){
document.getElementById('dialogbox').style.display = "none";
document.getElementById('dialogoverlay').style.display = "none";

window.location = redirect2;
}
}
var Alert = new CustomAlert();
  • Do you actually have those elements present in the HTML body of the page, e.g. dialogboxhead is it actually present in the HTML itself? – devkabiir Feb 12 '17 at 16:45
  • You can try to echo the actual alert HTML markup and the JS code in the same statement just to make sure everything is actually being outputted as expected. – devkabiir Feb 12 '17 at 16:48
  • @kabiir I do have them present as this: <div id="dialogoverlay"></div> <div id="dialogbox"> <div> <div id="dialogboxhead"></div> <div id="dialogboxbody"></div> <div id="dialogboxfoot"></div> </div> </div> – Francisco F. Feb 12 '17 at 21:30
  • The error you're getting incidents otherwise. Try to start small and create just one empty <div> element and a button with onclick event which adds some innerHTMLto it. If this works, then work your way up until you find your bug/typo. This is how I would've debugged. – devkabiir Feb 12 '17 at 21:43
  • Since you're not using any external JS libraries, the above method should work and help you find the root of the problem. – devkabiir Feb 12 '17 at 21:45
1

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();
|improve this answer|||||
  • Nevermind. I do have this on the HTML page before the Alert.render() : <div id="dialogoverlay"></div> <div id="dialogbox"> <div> <div id="dialogboxhead"></div> <div id="dialogboxbody"></div> <div id="dialogboxfoot"></div> </div> </div> – Francisco F. Feb 12 '17 at 21:27
  • Use Chrome (or Firefox). Open the Developer Tools (F12) and search for the IDs I mentioned in my answer. All of the IDs should show up under the Elements tab (Chrome Developer Tools). When you say "I do have this on the HTML page before the Alert.render().". What do you mean by "before"? Could you post the code? – Jorge Raigoza Feb 13 '17 at 0:43
  • Were you able to test this? Please refer to the section "Basic Testing" on my answer (updated). – Jorge Raigoza Feb 13 '17 at 20:55
  • I'm about to test it :) – Francisco F. Feb 14 '17 at 2:39
  • It found everything. What I mean by before, is that I have the divs before the calling the function. For example <div class="test"></div> and then <script>Alert.render('Hi');</script> – Francisco F. Feb 14 '17 at 2:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.