No worries and sorry if I phrased this in a confusing way!
The latest version of Prodigy now supports passing in a 'javascript' option that also accepts a string of JavaScript code, just like the html_template does for HTML. The JavaScript will be added as the last child of the page’s <body>, so after everything else. Here’s some example recipe code:
@prodigy.recipe('custom-recipe')
def custom_recipe():
# some recipe code here...
with open('/path/to/your_html.html') as f:
html_template = f.read()
with open('/path/to/your_script.js') as f:
javascript = f.read()
return {
'view_id': 'html',
'config': {
'html_template': html_template,
'javascript': javascript
}
# etc.
}
Your two files could then look like this:
<!--- your_html.html -->
<button onClick="doSomething()">Click me!</button>
// your_script.js
function doSomething() {
console.log('The current task is:', window.prodigy.content)
}
This approach should let you write pretty straightforward Vanilla JavaScript
Just keep in mind that you need to wait for the app to be rendered if you want your JavaScript to reference or select elements in your HTML template. Otherwise, the element might not exist yet and you’ll see an error (also see this comment). onClick handlers are fine, because they’re only executed once the user interacts with the element.
Prodigy fires a few custom events, including prodigymount when the app is mounted. So you can listen to this event to only execute your code once the app is ready:
<div class="your-div">Hello world</div>
document.addEventListener('prodigymount', event => {
var div = document.querySelector('.your-div');
// do something here
})