Hjdcti

I have added a custom step in checkout. I would like to use some JS to hide or disable the step based on if the associated shipping option is selected or not.
I tried to wrap it in if statement but failed, so I might just be placing the if statement incorrectly.
The error returned in console was "document.getElementById(...) is null".

define(
[
 'ko',
 'uiComponent',
 'underscore',
 'Magento_Checkout/js/model/step-navigator'
],
function (
 ko,
 Component,
 _,
 stepNavigator
) 
 'use strict';
 /**
 *
 * mystep - is the name of the component's .html template, 
 * <Vendor>_<Module> - is the name of the your module directory.
 * 
 */
 return Component.extend(
 defaults: 
 template: 'ICA_Customshipping/mystep'
 ,

 //add here your logic to display step,
 isVisible: ko.observable(true),


 /**
 *
 * @returns *
 */
 initialize: function () 
 //My attempt to wrap it in an if statement has failed 
 if(document.getElementById('s_method_icacustomshipping_icacustomshipping').checked) 
 this._super();
 // register your step
 stepNavigator.registerStep(
 //step code will be used as step content id in the component template
 'step_code',
 //step alias
 null,
 //step title value
 'Step Title',
 //observable property with logic when display step or hide step
 this.isVisible,

 _.bind(this.navigate, this),

 /**
 * sort order value
 * 'sort order value' < 10: step displays before shipping step;
 * 10 < 'sort order value' < 20 : step displays between shipping and payment step
 * 'sort order value' > 20 : step displays after payment step
 */
 15
 );

 return this;

 
 ,

 /**
 * The navigate() method is responsible for navigation between checkout step
 * during checkout. You can add custom logic, for example some conditions
 * for switching to your custom step 
 */
 navigate: function () 

 ,

 /**
 * @returns void
 */
 navigateToNextStep: function () 
 stepNavigator.next();
 
 );

);