Adding a function to a dropdown menu button

[Gavin]

Hey Team,

This will be a pretty easy one to figure out I believe but I can't see what I'm doing wrong here. I am trying to add a button to a dropdown menu and have that button modify the subject line. I can get it working from the initial button click but not from the innerHTML I keep getting an error message saying: Uncaught ReferenceError: jim is not defined

The entire code is here:

InboxSDK.load('1', 'Hello World!').then(function(sdk){

// the SDK has been loaded, now do something with it!

sdk.Compose.registerComposeViewHandler(function(composeView){

function jim() {

composeView.setSubject('[Random text]' + ' ' + composeView.getSubject() );

}

composeView.addButton({

      title: "Options",

      type: "MODIFIER",

      iconClass: "Small",

      iconUrl: chrome.runtime.getURL('spanner.png'),

      hasDropdown: true,

      onClick: function(menu) {

      menu.dropdown.el.innerHTML = "<input type=button onclick=jim() value=button1> <p><input type=button  value=button2>";

    

    

},

});

});

});

Yes I know its basic but i'm a newbie.. 

[Chris Cowan]

I wouldn't recommend that you use the onclick attribute in HTML like that because it can't refer to variables in scope. Add an event listener to the button element instead:

InboxSDK.load('1', 'Hello World!').then(function(sdk) {

  // the SDK has been loaded, now do something with it!

  sdk.Compose.registerComposeViewHandler(function(composeView) {

    function jim() {

      composeView.setSubject('[Random text]' + ' ' + composeView.getSubject());

    }

    composeView.addButton({

      title: "Options",

      type: "MODIFIER",

      iconClass: "Small",

      iconUrl: chrome.runtime.getURL('spanner.png'),

      hasDropdown: true,

      onClick(menu) {

        menu.dropdown.el.innerHTML = `

          <input class="button1" type="button" value="button1">

          <p>

          <input class="button2" type="button" value="button2">

        `;

        const button1 = menu.dropdown.el.querySelector('.button1');

        button1.addEventListener('click', function(e) {

          jim();

        });

      }

    });

  });

});

[Gavin]

That helps a lot. Thank you very much.