Uncaught Type Error: Cannot set properties of null

The "Uncaught TypeError: Cannot set properties of null" error typically indicates that your JavaScript code is attempting to access or modify an element that does not exist in the DOM. This often happens when the script runs before the DOM is fully loaded or if the element's selector is incorrect.

Common Issues and Fixes:

1. Incorrect ID in JavaScript: Ensure that the IDs used in document.getElementById() match the IDs in your HTML.
2. Script Timing: Ensure the script runs after the DOM is fully loaded.
3. AJAX Response: Ensure your server-side script returns the expected JSON format.
4. Error Handling: Add error handling for AJAX requests and JSON parsing to help diagnose issues.

 You're trying to populate a textarea with the ID "section1_target_action" + [0]. However, this will result in the ID being "section1_target_action0", which might not be what you intended. Try the below code once:

var xmlhttp = new XMLHttpRequest();
//creating URL to php to retrieve data from backend.
var url = "getSaveDraftExemptValues.php?evaluator_id=" + evaluator_id;

xmlhttp.open("GET", url, true);
xmlhttp.onreadystatechange = function () {
    if (this.readyState == 4 && this.status == 200) {
        var myObj = JSON.parse(this.responseText); 

        // Loop through the data and populate textareas
        for (var i = 0; i < myObj.length; i++) {
            var section1_action = myObj[i].section1_action;
            document.getElementsByName("section1_target_action[]")[i].value = section1_action;
        }
    }
}

xmlhttp.send();

Hi Amit,

Please see code snippet below. The problem here it is not populating to section1_target_action array it return this error.

HTML:

Javascript:

var xmlhttp = new XMLHttpRequest();

//creating URL to php to retrieve data from backend.
        url="getSaveDraftExemptValues.php?evaluator_id="+evaluator_id;
    
        xmlhttp.open("GET",url,true);
        xmlhttp.onreadystatechange = function () {
            if (this.readyState == 4 && this.status == 200)
            {
                var myObj = JSON.parse(this.responseText); 

                 let section1_action = myObj[0].section1_action;
                            document.getElementById("section1_target_action" + [0]).value = section1_action;           

}

}

xmlhttp.send(null);

Back end: PHP

$output = array();

$database = new Database();
$db = $database->getConnection();
$userModel = new Transaction($db);

$evaluator_id = $_GET['evaluator_id'];
$save_draft=1;

$output = $userModel->getSaveDraftEmployee($evaluator_id,$save_draft);                    

//Send in JSON encoded form
$result= json_encode($output,true);

echo $result;

Thank you.

Could you please share a minimal, reproducible code snippet to understand the issue? Without seeing your code, it's difficult to provide specific guidance.