Javascript error: Cannot read property 'parentNode' of null

Question

The javascript I am using:

javascript: c = '{unit}, ({coords}) {player} |{distance}| {return}';
p = ['Scout', 'LC', 'HC', 'Axe', 'Sword', 'Ram', '***Noble***'];

function V() {
    return 1;
}
window.onerror = V;

function Z() {
    d = (window.frames.length > 0) ? window.main.document : document;
    aid = d.getElementById('editInput').parentNode.innerHTML.match(/id\=(\d+)/)[1];

    function J(e) {
        vv = e.match(/\d+\|\d+/g);
        return (vv ? vv[vv.length - 1].match(/((\d+)\|(\d+))/) : null);
    }
    function K(e) {
        f = parseInt(e, 10);
        return (f > 9 ? f : '0' + f);
    }
    function L(g, e) {
        return g.getElementsByTagName(e);
    }
    function N(g) {
        return g.innerHTML;
    }
    function M(g) {
        return N(L(g, 'a')[0]);
    }
    function O() {
        return k.insertRow(E++);
    }
    function W(f) {
        return B.insertCell(f);
    }
    function P(g, e) {
        g.innerHTML = e;
        return g;
    }
    function X(e) {
        C = B.appendChild(d.createElement('th'));
        return P(C, e);
    }
    function Y(f) {
        return K(f / U) + ':' + K(f % (U) / T) + ':' + K(f % T);
    }
    U = 3600;
    T = 60;
    R = 'table';
    S = 'width';
    s = L(document, R);
    for (j = 0; j < s.length; j++) {
        s[j].removeAttribute(S);
        if (s[j].className == 'main') {
            s = L(L(s[j], 'tbody')[0], R);
            break;
        }
    }
    D = 0;
    for (j = 0; j < s.length; j++) {
        s[j].removeAttribute(S);
        if (s[j].className = 'vis') {
            k = s[j];
            if (t = k.rows) {
                D = t.length;
                break;
            }
        }
    }
    for (E = 0; E < D; E++) {
        l = t[E];
        m = (u = l.cells) ? u.length : 0;
        if (m) {
            u[m - 1].colSpan = 5 - m;
            if (N(u[0]) == 'Arrival:') {
                Q = new Date(N(u[1]).replace(/<.*/i, ''));
            } else {
                if (N(u[0]) == 'Arrival in:') {
                    v = N(u[1]).match(/\d+/ig);
                }
            }
            if (E == 1) {
                G = M(u[2]);
            }
            if (E == 2) {
                w = J(M(u[1]));
            }
            if (E == 4) {
                x = J(M(u[1]));
            }
        }
    }
    y = v[0] * U + v[1] * T + v[2] * 1;
    n = w[2] - x[2];
    o = w[3] - x[3];
    F = Math.sqrt(n * n + o * o);
    H = F.toFixed(2);
    E = D - 2;
    s = L(k, 'input');
    i = s[1];
    h = s[0];
    h.size = T;
    B = O();
    P(W(0), 'Distance:').colSpan = 2;
    P(W(1), H + ' Fields').colSpan = 2;
    B = O();
    X('Unit');
    X('Sent');
    X('Duration');
    X('Name to');
    c = c.replace(/\{coords\}/i, w[1]).replace(/\{distance\}/i, H).replace(/\{player\}/i, G);
    for (j in p) {
        z = Math.round([9.00000000, 10.00000000, 11.00000000, 18.0000000015, 22.00000000, 30.00000000, 35.0000000][j] * T * F);
        A = z - y;
        if (A > 0) {
            I = Y(z);
            B = O();
            P(W(0), p[j]);
            P(W(1), A < T && 'just now' || A < U && Math.floor(A / T) + ' mins ago' || Y(A) + ' ago');
            P(W(2), I);
            C = W(3);
            q = C.appendChild(i.cloneNode(1));
            r = C.appendChild(h.cloneNode(1));
            r.id = 'I' + j;
            r.value = c.replace(/\{duration\}/i, I).replace(/\{sent\}/i, new Date(Q.valueOf() - z * 1000).toLocaleString().replace(/.\d{4}/i, '').replace(/(\w{3})\w*/i, '$1')).replace(/\{return\}/i, new Date(Q.valueOf() + z * 1000).toString().replace(/\w+\s*/i, '').replace(/(\d*:\d*:\d*)(.*)/i, '$1')).replace(/\{unit\}/i, p[j]).replace(/\{attack_id\}/i, aid);
            q.onmousedown = new Function('h.value=d.getElementById(\'I' + j + '\').value;');
        }
    }
}
Z();

The error I receive:

Uncaught TypeError: Cannot read property 'parentNode' of null

A URL looks like this:

game.php?village=2100&id=4348754&type=other&screen=info_command

Answer 1

There are two possibilities:

1. editInput is a typo, and the actual id of that element is different (ids are case-sensitive).
2. You are executing this code while the DOM is not ready. To prevent this, execute the code just before the </body> closing tag, or wrap it in an event handler for the load event of window or the DOMContentLoaded event of document .

EDITED How to wrap your code:

window.onload = function() {
    //your code here
};

Answer 2

In my case it was a conflict between slider and form validator as they were located on different pages but javascript file would of target both of them simultaneously, so all pages that had no slider would come up with "Cannot read property 'parentNode' of null" error, so I have added to the slider If statement:

if(document.getElementById("mainImage")){
var myImage = document.getElementById("mainImage");
var linkElement = myImage.parentNode;

that solved my problem, try it

Answer 3

I was trying to remove child element from parent:

constructor(private renderer: Renderer2) { }

removeChildEl() {
   this.renderer.removeChild(parent, child);
}

but for some reason parent-element does not exist so I need to check via if condition:

removeChildEl() {
   if(parent)
      this.renderer.removeChild(parent, child);
}

so if the parent exists then remove the child otherwise do nothing.