Help with Javascript/HTML and iframes

Hi all,
I’m trying to make some interactive Anki cards with the help of this site to learn some new bellringing methods.

I’ve managed to embed the site as an iframe:

<iframe src="https://bobwallis.github.io/MethodTutor/#notation=x38x14x1258x36x14x58x16x78%2C12&stage=8&title=Cambridge%20Surprise%20Major&allowMethodSelection=false" style="height: 650px; width:100%;" seamless="seamless"></iframe>"

What I’m looking to do is to simulate two mouse clicks to setup the page to match the card I’m looking at - the bell number and the single lead buttons on the website.

I’ve worked out what commands I need to run using the Firefox console

document.getElementById('practice_chooser_bell').querySelector( 'input#practice_chooser_bell_'+ 3 ).dispatchEvent(  new MouseEvent( 'click' ) );
document.getElementById('practice_chooser_leadOrCourse').querySelector( 'input#practice_chooser_leadOrCourse_lead' ).dispatchEvent(  new MouseEvent( 'click' ) );

What I’m hoping to end up with (for the link above) is a card for 2:8 which I can then have as a field on my note and replace in the command to set the practice_chooser_bell.

However I’m not sure how I can then run these commands from inside Anki and/or whether any changes are required to these lines to enable them to run on elements within the iframe.