Saving the input of an HTML text area as a JS variable isn't working

[nrschoen]

Hi,
I would like to save the text participants type in a <textarea> (see last row of the stimulus parameter) and save it to the response data (see on_finish function). However, I am getting an error (see picture).

var mood_induction_happy = {
  type: "html-keyboard-response",
  on_load: function() {
    audio_happy.play();
  },
  stimulus: `<p>For the coming 10 minutes, you will be given time to get into a happy mood.</p>
          <p>Try to vividly recall a personal memory, or imagine yourself in the situation described below. Imagine the situation with as many details as possible and write down your thoughts.</p>
          <p>Here an example situation with some questions that can help you to get into the right mood. If you chose to use the example, please answer every question.</p>
          <hr/>
          <p>It’s your birthday and your friends throw you an amazing surprise party! All of your favorite people are there, you are having a great time together, doing the best imaginable birthday activities.</p>
          <p>Who do you tell first? What do you say to them? What thoughts go through your mind?</p>
          <p>What do you say to your friend?</p>
          <p>What is his/her response to the situation?</p>
          <p>What are the consequences of the situation?</p>
          <textarea id="textArea" rows="5" cols="60" name="text" placeholder="Enter text here"></textarea>`,
  choices: jsPsych.NO_KEYS,
  trial_duration: 6000,
  on_finish: function(data) {
    audio_happy.pause();
    data.response = document.getElementById("textArea").innerHTML;
  }
};
timeline.push(mood_induction_happy);

[jodeleeuw]

Hi @nrschoen,

You could use the survey-text plugin to handle this and stick your HTML for the stimulus in the prompt parameter for the question.

The way to access the value of a <textarea> is through it's value property.

document.getElementById("textArea").value

But that will probably not work here because the DOM will have been cleared before the on_finish function runs. You would need to get this value before the display is cleared, but that happens inside the plugin code.

[nrschoen]

Thanks, I figured it out by adding response: document.getElementById("textArea").value in the plugin code before it clears the HTML.