Set Default SquareSpace Product Variants failing to get YUI element

Question

I'm trying to set the default options on a product on my Squarespace website.

I'm using the brine template.

Here is the website: https://pear-nectarine-6mdf.squarespace.com/childrens-subscription

password is: qpbooks

I'm injecting the following code into the page:

<script>

function setValue() 
{

    var dropdown = document.querySelectorAll('[data-variant-option-name="Back Binding"]')[0];
    dropdown.value = 'Mixed';
    Y.one('#'+dropdown.id).simulate('change');

  
    var dropdown2 = document.querySelectorAll('[data-variant-option-name="Subscription Length"]')[0];
    dropdown2.value = '12 Months';
    Y.one('#'+dropdown2.id).simulate('change');
  
}

window.onload = setValue;

</script>

I get the following error when looking at the console:

38: Y.one('#'+dropdown.id).simulate('change');

childrens-subscription:38 Uncaught TypeError: Cannot read property 'simulate' 
of null at setValue (childrens-subscription:38)

I think this means that YUI is not finding my selection box maybe?

When I remove the simulate calls the code runs without error and the text in the selection box changes but the product price doesn't.

I'm having trouble accessing the YUI library documentation. Any help would be much appreciated.

Answer 1

The select elements which you are referencing do not have id properties and, therefore, when you run Y.one('#'+dropdown.id).simulate('change'); you will get an error. There is no id on dropdown.

Instead, simply pass dropdown into Y.one(...) like this:

Y.one(dropdown).simulate('change');

That should do it.