Adding buttons to the interface

Question

I'd like add a button and let performers to copy some text to their clipboard once they click on the button. However, I found:

1. the element interface { {button}} does not accept an "on-click" property
2. the original html button tag may work, but when I add the the function to the on_click property and the js section, the page returns the error "the function does not found". So, my question is, how I can add a user defined js function to a project? Is there any example code/project I can reference to?

Answer 1

Try to add the following code in TASK INTERFACE in your project:

<div>
{{field type="input" name="whatever" value=link size="L" width="70%"}}
{{button label="Copy text to clipboard" href="#" size="L"}}
</div>
<textarea class="hiddenInput"></textarea>

in onRender() in JS field:

onRender: function() {
var _document = this.getDOMElement(),
button = _document.querySelector('.button'),
hiddenInput = _document.querySelector('.hiddenInput'),
task = this;
button.addEventListener('click',function (e) {
e.preventDefault();
hiddenInput.value = task.getTask().input_values.link;
/*hiddenInput.focus();*/
hiddenInput.click();
hiddenInput.select();
document.execCommand('copy');
button.classList.add('button_disabled');
button.querySelector('.button__label').textContent = 'Done';
setTimeout(function () {
button.classList.remove('button_disabled');
button.querySelector('.button__label').textContent = 'Copy text to clipboard';
},1000)
})
},