Use document.getElementById with a button from jspsych-html-button-response button

[amunn]

I want to copy a value in to the clipboard when the participant presses the button. It seems that I should be able to do this with the following code if I know how to refer to the button by ID. How do I do this? Thanks.

If this won't work, can anyone suggest another way to get a value into the clipboard? I want participants to have a generated code able to be pasted into a web form after they complete the experiment, without them having to copy the code manually.

document.getElementById("WHAT DO I PUT HERE?").addEventListener("click", async () => {
    try {
        await navigator.clipboard.writeText(comp_code);
        console.log("Text copied to clipboard");
    } catch (err) {
        console.error("Failed to copy: ", err);
    }
});

[jodeleeuw]

Do you know what the HTML source code is on the page that has the code?

If the button has an id field like <button id="submit-button"> then you could use .getElementById("submit-button")

If it doesn't have an id field, but this is the only button that is on the page, you could also use document.querySelector("button").addEventListener(...)

[amunn]

Thanks Josh, the button is a single button generated by html-button-response Is there a button id added by the plugin? In the meantime I'll try the second method.

[amunn]

What I ended up doing that worked was redefine button_html to add an onclick parameter. But I still don't understand how to do that properly, since I was unable to get the choice in the definition to work. Here's the code I used:

function endButton(choice) {
return ('<button class="jspsych-btn" onclick="navigator.clipboard.writeText(comp_code)">'+end_task_choice[0]+'</button>')}

var end_task = {
		 			 type: jsPsychHtmlButtonResponse,
		 			 stimulus: end_task_html,
		 			 button_html: endButton,
		 			 choices: end_task_choice,
		 		 };

I tried to use ${choice} as in the documentation but that simply displayed ${choice} as the button text.

[kurokida]

Hi,

Using Chrome’s Developer Tools, you can easily check the HTML source of the page you're viewing. Please refer to the attached image. For example, in the case shown in the image, you can select the button with the following code.

const firstButton = document.querySelector('#jspsych-html-button-response-btngroup button[data-choice="0"]');

Best,
Daiichiro