Q:

function which should display an error message does not display it

As stated in the title, I have a function which should display an error message, but doesn't.  I get an error:

Cannot set property 'textContent' of null

So basically, when a person clicks a check button, the input fields get a required "status".  Once that happens, and error should appear underneath the input fields stating that they are required and should be filled out. 
This does not happen (Cannot set property 'textContent' of null). 
Any help would be welcome. 
innerHTML of null error: pnameError.innerHTML = '';
textContent of null error: pnameError.textContent = 'You need to insert your name.'; 
JS
let pname = document.getElementById("popupfname");
let pnameError = document.querySelector("#popupfname + span#pf");

let pemail = document.getElementById("popupemail");
let pemailError = document.querySelector("#popupemail + span#pe");

var adverts = document.querySelector("input[name=advertsM]");
adverts.addEventListener('change', function() {
    if (this.checked) {
        console.log("CHECKED");
        document.getElementById("popupfname").required = true;
        document.getElementById("popupemail").required = true;
        /*            Prikaži error msg iz prve                  */
        showNameError();
        showEmailError();
    } else {
        console.log("NOT");
        document.getElementById("popupfname").required = false;
        document.getElementById("popupemail").required = false;
        popfn();
        popem();
    }
});

function popfn (event) {
    if (pname.validity.valid) {
        pnameError.innerHTML = '';
        pnameError.className = 'error'; //
    } else {
        showNameError();
    }
};

function popem (event) {
    if (pemail.validity.valid) {
        pemailError.innerHTML = '';
        pemailError.className = 'error';
    } else {
        showEmailError();
    }
};

function showNameError() {
    if (pname.validity.valueMissing) {
        pnameError.textContent = 'You need to insert your name.'; 
    } else if (pname.validity.typeMismatch) {
        pnameError.textContent = 'Entered value must a name.'; 
    } else if (pname.validity.tooShort) {
        pnameError.textContent = 'Entered name must be atleast 3 characters long.'; 
    }
    pname.className = 'error active';
}

function showEmailError() {
    if (pemail.validity.valueMissing) {
        pemailError.textContent = 'You need to insert your e-mail address.'; 
    } else if (pemail.validity.typeMismatch) {
        pemailError.textContent = 'Entered value must be a valid e-mail address.'; 
    } else if (pemail.validity.tooShort) {
        pemailError.textContent = 'Entered e-mail address must be atleast 6 characters long.'; 
    }
    pemail.className = 'error active';
}

HTML
<form accept-charset="UTF-8" name="popupform" onsubmit="return false;" method="post" id="popupform">
        <div id="adv-t"></div><br />
    <label class="mlist">
    <input type="checkbox" name="advertsM" id="advertsM" value="Yes">
        <span id="adv-c"></span>
        <br />
    </label><br />
    <input type="text" pattern="[A-Za-z][^0-9]{2,25}" name="popupfname" id="popupfname" placeholder="Janez"autocorrect="off" autocapitalize="off" /><br />
    <span id="pf" class="error pfn" aria-live="polite"></span><br />
    <input type="email" name="popupemail" id="popupemail" autocorrect="off" autocapitalize="off" maxlength="45" placeholder="moj@email.si"/><br />
    <span id="pe" class="error pem" aria-live="polite"></span><br /><br />
    <div id="small">
    </div>

    <hr style="margin-top: -6px;">
    <button id="allow">
        <span id="a"></span>
    </button>
    <button id="deny" onclick="deny()">
        <span id="d"></span>
    </button>
</form>

A:

The problem is the next element to input is br, not a span
change
let pnameError = document.querySelector("#popupfname + span#pf")
...
let pemailError = document.querySelector("#popupemail + span#pe");

to
let pnameError = document.querySelector("#popupfname + br + span#pf")`
...
let pemailError = document.querySelector("#popupemail + br + span#pe");

Working example:

let pname = document.getElementById("popupfname");
let pnameError = document.querySelector("#popupfname + br + span#pf"); // <-- here ou had an error, because the next element to #popupfname is br, but not the span id="pf"

let pemail = document.getElementById("popupemail");
let pemailError = document.querySelector("#popupemail + br + span#pe"); // <-- here ou had an error, because the next element to #popupemail is br, but not the span id="pe"

var adverts = document.querySelector("input[name=advertsM]");
adverts.addEventListener( 'change', function() {
        if(this.checked) {
            console.log("CHECKED");
            document.getElementById("popupfname").required = true;
            document.getElementById("popupemail").required = true;
            /*            Prikaži error msg iz prve                  */
            showNameError();
            showEmailError();
        } else {
            console.log("NOT");
            document.getElementById("popupfname").required = false;
            document.getElementById("popupemail").required = false;
            popfn();
            popem();
        }
});

function popfn (event) {
    if (pname.validity.valid) {
        pnameError.innerHTML = ''; 
        pnameError.className = 'error'; // 
    } else {
        showNameError();
    }
};

function popem (event) {
    if (pemail.validity.valid) {
        pemailError.innerHTML = '';
        pemailError.className = 'error';
    } else {
        showEmailError();
    }
};

function showNameError() {
    if(pname.validity.valueMissing){
        pnameError.textContent = 'You need to insert your name.'; 
    }else if(pname.validity.typeMismatch){
        pnameError.textContent = 'Entered value must a name.'; 
    }else if(pname.validity.tooShort){
        pnameError.textContent = 'Entered name must be atleast 3 characters long.'; 
    }
    pname.className = 'error active';
}

function showEmailError() {
    if(pemail.validity.valueMissing){
        pemailError.textContent = 'You need to insert your e-mail address.'; 
    }else if(pemail.validity.typeMismatch){
        pemailError.textContent = 'Entered value must be a valid e-mail address.'; 
    }else if(pemail.validity.tooShort){
        pemailError.textContent = 'Entered e-mail address must be atleast 6 characters long.'; 
    }
    pemail.className = 'error active';
}
<form accept-charset="UTF-8" name="popupform" onsubmit="return false;" method="post" id="popupform">
        <div id="adv-t"></div><br />
    <label class="mlist">
    <input type="checkbox" name="advertsM" id="advertsM" value="Yes">
        <span id="adv-c"></span>
        <br />
    </label><br />
    <input type="text" pattern="[A-Za-z][^0-9]{2,25}" name="popupfname" id="popupfname" placeholder="Janez"autocorrect="off" autocapitalize="off" /><br />
    <span id="pf" class="error pfn" aria-live="polite"></span><br />
    <input type="email" name="popupemail" id="popupemail" autocorrect="off" autocapitalize="off" maxlength="45" placeholder="moj@email.si"/><br />
    <span id="pe" class="error pem" aria-live="polite"></span><br /><br />
    <div id="small">
    </div>  

    <hr style="margin-top: -6px;">
    <button id="allow">
        <span id="a"></span>
    </button>
    <button id="deny" onclick="deny()">
        <span id="d"></span>
    </button>
</form>

