# Adding a button with Onclick
**URL:** https://meta.discourse.org/t/adding-a-button-with-onclick/146107
**Category:** Support
**Created:** [March 30, 2020, 8:45am UTC](https://meta.discourse.org/t/adding-a-button-with-onclick/146107 "2020-03-30T08:45:25Z")
**Posts on this page:** 5
**Page:** 1
I am clearly missing something here.
I am trying to add a button and attach an onclick event .
in a component’s HTML I added:
``
and in the /head I added:
```
$('#button_test').on('click', moreDetails);
function moreDetails(e){
console.log(`Listening to: ${e.target.value}`);
}
```
But it’s not triggering anything.
I am this dumb?
F.
---
Remember that Discourse is an Ember.js app so you’ll need to follow Ember rules for JavaScript coding.
I believe jQuery is soon going to be removed entirely from Ember as well, so that `$` does not bode well.
---
Hi all,
I ended up creating a widget in the /head section of my component and then adding it in the Handlebar template.
let currentLocale = I18n.currentLocale();
I18n.translations[currentLocale].js.custom\_modal\_title = “My custom modal”;
```
const showModal = require("discourse/lib/show-modal").default;
const h = require("virtual-dom").h;
api.createWidget("modal-button", {
tagName: "button.btn.btn-primary",
html(arg) {
return arg;
},
click(arg) {
if(arg.target.innerText=="+ Nuovo Wisper") {
$('#create-topic').click();
} else if(arg.target.innerText=="Aiuta") {
window.location.replace("/c/supporto/11");
} else {
window.location.replace("/t/invita-amici-a-mywisper/26");
}
}
});
api.createWidget("banner", {
tagName: "div.wrap",
html() {
let contents = [];
contents.push(h("div.hc-column","Più siamo più funziona. Condividi con i tuoi amici, è gratis!"));
contents.push(h("div.hc-column","Fai login e pubblica la tua richiesta di aiuto"));
contents.push(h("div.hc-column","Vuoi aiutare? Cerca i Wisper nella tua città"));
let row1 = h("div.row-cont", contents);
let h1 = h('div.top-spot',h('h1','myWisper è un luogo dove offrire e cercare aiuto'));
let inner = [];
let bottoni = [];
bottoni.push(h("div.hc-column",this.attach('modal-button','Invita')))
bottoni.push(h("div.hc-column",this.attach('modal-button','+ Nuovo Wisper')))
bottoni.push(h("div.hc-column",this.attach('modal-button','Aiuta')))
let row2 = h("div.row-cont", bottoni);
inner.push(h1,row1,row2);
return h("div.hc-banner",inner);
},
});
api.createWidget("banner_mobile", {
tagName: "div.wrap",
html() {
let h1 = h('div.top-spot',h('h1','myWisper è un luogo dove offrire e chiedere aiuto.'));
let inner = [];
let bottoni = [];
bottoni.push(h("div.hc-column-mobile",this.attach('modal-button','Invita')))
bottoni.push(h("div.hc-column-mobile",this.attach('modal-button','+ Nuovo Wisper')))
bottoni.push(h("div.hc-column-mobile",this.attach('modal-button','Aiuta')))
let row2 = h("div.row-cont", bottoni);
inner.push(h("h1.mobile-header","myWisper è un luogo dove offrire e chiedere aiuto"));
inner.push(row2);
return h("div.hc-banner-mobile",inner);
},
});
```
---