javascipt "Undefined" when variable is sent to function and obvious error message

[CSS-Regex]

<div class="row">
     <label for="a" id="lbName">Name:</label>
     <input type="text" name="name" id="name">
</div>

The if statement sending variables, lblTag and errorLbl to function "errorMessage", the error message I am getting is "TypeError: Cannot read properties of null (reading 'style'), which also means that the last line in the errorMessage function is also going to getting an error message, but won't show until the first error is cleared. The error message is for variable lblTag

if (name ==""){
   lblTag = "lbName"
   errorLbl = "Name"
   errorMessage(lblTag, errorLbl)
}

function errorMessage(lblTag, errorLbl){
    console.log(errorLbl) // getting undefined in the console here and the other variable as well and getting error message
  // error message: TypeError: Cannot read properties of null (reading 'style')
    document.getElementById(`${lblTag}`).style.color = `red`
    document.getElementById('error-lbl-message').innerHTML = errorLbl + " is empty"
}

Edited March 18 by CSS-Regex

[CSS-Regex]

I found the problem, other if statements were using something similar to the function that I've shown above. I hadn't completed the code for the other if statements, my bad

[Danishhafeez]

Ensure that the variables lblTag and errorLbl are correctly assigned and passed to the errorMessage function.

Check if the elements with the IDs referenced by lblTag and errorLbl exist in the HTML.

<div class="row">
    <label for="a" id="lbName">Name:</label>
    <input type="text" name="name" id="name">
</div>

<script>
    function checkName() {
        var name = document.getElementById("name").value;
        if (name === "") {
            var lblTag = "lbName";
            var errorLbl = "Name";
            errorMessage(lblTag, errorLbl);
        }
    }

    function errorMessage(lblTag, errorLbl) {
        console.log(errorLbl); // Check if errorLbl is correctly passed
        var element = document.getElementById(lblTag);
        if (element) {
            element.style.color = "red";
        } else {
            console.error(`Element with ID "${lblTag}" not found.`);
        }
        var errorMessageElement = document.getElementById('error-lbl-message');
        if (errorMessageElement) {
            errorMessageElement.innerHTML = errorLbl + " is empty";
        } else {
            console.error('Error message element not found.');
        }
    }
</script>

Make sure to call the checkName function whenever you need to validate the name field. This code includes checks to ensure that the elements referenced by lblTag and errorLbl exist before attempting to modify them. This can help prevent TypeErrors when trying to access properties of null or undefined.

Best Regard

Danish Hafeez | QA Assistant

ICTInnovations