Can not update the HTML variables

[hodaVS]

Hi,
I'm writing a task in JsPsych where I need to update the score on the screen after a button is clicked. There are four buttons (images) that the user can click on. In the onclick function, I indicated to update the score (the penalty) and preview it on the screen. When I use document.getElementById("A").innerHTML = penalty; to update the value for a penalty, it updates in the console but does not display it on the actual screen. I'll attach the full
Iowa-task.zip
code in case more information is needed. Can someone give me an idea of how to update the HTML in the correct way?
Thanks.

    var grid_buttons = {
      type: jsPsychImageButtonResponse,

      stimulus: "",
      choices: ["A", "B", "C", "D"],
      button_html:
        "<div>" +
        '<button onclick = "color(this)"><img id="%choice%" src="%choice%.jpeg", img id="%choice%" src="%choice%.jpeg" , img id="%choice%" src="%choice%.jpeg",img id="%choice%" src="%choice%.jpeg"></button>' +
        '<p id = "test">' +
        `${penalty}` +
        "</p>" +
        "</div>",
      prompt: "Please click on a picture" + game_decks[0].p,
    };
    var clicks = 0;
    function color(el) {
      clicks += 1;

      if (img_id == "A") {
        net_gain = 100;

        loss =
          game_decks[0].cards[
            Math.floor(Math.random() * game_decks[0].cards.length)
          ];
        penalty += net_gain + loss;
        document.getElementById("A").innerHTML = penalty;
        console.log("Gain" + net_gain);
        console.log("loss" + loss);
        console.log("penalty" + penalty);
      }
      if (img_id == "B") {
        net_gain = 100;
        loss =
          game_decks[1].cards[
            Math.floor(Math.random() * game_decks[1].cards.length)
          ];
        penalty += net_gain + loss;
        console.log("Gain" + net_gain);
        console.log("loss" + loss);
        console.log("penalty" + penalty);
      }
      if (img_id == "C") {
        net_gain = 50;
        loss =
          game_decks[2].cards[
            Math.floor(Math.random() * game_decks[2].cards.length)
          ];
        penalty += net_gain + loss;
        console.log("Gain" + net_gain);
        console.log("loss" + loss);
        console.log("penalty" + penalty);
      }
      if (img_id == "D") {
        net_gain = 50;
        loss =
          game_decks[3].cards[
            Math.floor(Math.random() * game_decks[3].cards.length)
          ];
        penalty += net_gain + loss;
        console.log("Gain" + net_gain);
        console.log("loss" + loss);
        console.log("penalty" + penalty);
      }
      game_decks[0].p = penalty;
    }

[ChristopheBossens]

Hi!

This was an interesting puzzle, but I think the explanation for why it does not update is because the button_html code is implemented when all the trials are created. This happens when your timeline is initialized, so it will simply take the value of penalty at the start of your experiment.

I have changed the code as follows

   var penalty_values = {
        'A' : 200,
        'B' : 150,
        'C' : 100,
        'D' : 50
      };

    var grid_buttons = {
      type: jsPsychImageButtonResponse,

      stimulus: "",
      choices: ["A", "B", "C", "D"],
      button_html: "<div>" + '<button onclick = "color(\'%choice%\')"><img id="%choice%" src="%choice%.jpeg"></button>' + '<p id = "test_%choice%"></p>' + "</div>",
      prompt: "Please click on a picture" + game_decks[0].p,
      on_load: function(){
        document.getElementById("test_A").innerHTML = penalty_values['A'];
        document.getElementById("test_B").innerHTML = penalty_values['B'];
        document.getElementById("test_C").innerHTML = penalty_values['C'];
        document.getElementById("test_D").innerHTML = penalty_values['D'];
      }
    };

There is a dictionary with penalty values for each possible id. I assume btw that the values you want to change are displayed in the paragraph and not in the image (in the code you sent you were trying to update the innerHTML of an image). The key is to use the on_load function of the trial, which will execute immediately after the trial is actually display on the screen. At that point you can get the relevant elements for which you want to change the value. That is, if you now use the following code in your color(e) function:

penalty_values['A'] += net_gain + loss;

You should get an updated value on the next trial. Is this what you needed?

[hodaVS]

Thanks a lot, the on_load function was the key to my problem.