Update image src onclick for subsequent trials

[jaimielee97]

I’m coding an experiment with a 12x12 grid of image buttons in jsPsych. Participants receive feedback based on which squares they choose to click. These squares are all initially white (saved as an img file called “old”) but after a square has been clicked I want it to turn grey (img file called “new”) for all subsequent trials (100 total). To do this, I’ve been trying to get the src of a button to update after it has been clicked.

I was able to change the image on an individual trial using advice from Q&A #1931. The trial normally ends upon click, but I turned that off and was able to see the square change to grey after it was clicked. However, all the squares revert back to white after participants see the feedback screen and then return to the grid for the next trial.

var squares = new Array(144); 
    for (var t = 0; t < squares.length; t++) {   
        squares[t] = t;
    };

   var responseGrid = {    
        type: jsPsychHtmlButtonResponseGridFeedback, // custom plugin arranges buttons in 12 x 12 grid
        stimulus: [], 
        prompt: "<p>Please select a key</p>",
        choices: squares,
        button_html: '<button class= "jspsych-btn-grid" style = "display: grid" onclick = "color(this)"><img id="%choice%" src="imgRareEnvironment/%choice%-old.jpg"></button>', 
        image_size: 100,
        response_ends_trial: false,
        trial_duration: 6000,
        on_finish: function(data){
            i = i + 1;
            data.i = i;
            var lastSquare = data.response;
            clickedSquares.push(data.response);
        },
    };

    function color(el){  
    var img_id = el.querySelector('img').id;  
    var img_el = document.getElementById(img_id); 
    img_el.src = img_el.src.replace("old","new");
    };

To try and fix this so the colour change carried over for all future trials, I made the button_html a function and included an on_finish function that goes through all the squares and updates them to grey if they are included in the "clicked squares" array. However, this gives an error "Uncaught TypeError: Cannot set properties of null (setting 'src')". I'm not sure why it can't find the images to update the src, or if there's a better way to go about this. Any advice would be greatly appreciated, thank you!

var responseGrid = {    
   type: jsPsychHtmlButtonResponseGridFeedback,
   stimulus: [], 
   prompt: "<p>Please select a key</p>",
   choices: squares,
   button_html: function(choice) {
     var button_html = '';
     var choice = '%choice%';
     var id = 'square-' + choice;
     var src = "imgRareEnvironment/" + choice + "-old.jpg"; 
     button_html += '<button class="jspsych-btn-grid" style="display: grid"><img id="' + id + '" src="' + src + '"></button>';
     return button_html;
   },
   image_size: 100,
   on_finish: function(data){
       i = i + 1;
       data.i = i;
       var lastSquare = data.response;
       clickedSquares.push(lastSquare);
       for (let t = 0; t < 144; t++) {
         let image = document.getElementById('square-' + t);
         if (clickedSquares.includes(t)) { 
           image.src = "imgRareEnvironment/" + t + "-new.jpg";
         }
       }
   },
   };