Help with buttons

I’ve used 4 years ago the v1 of fw7
now I’m trying to update to the new version, but I can’t understand how to use the buttons.
in v1 I did something like this:

in html:
href="#" class=“item-link list-button” id=“mybutton_b1” onclick=“DoSomething()”>Do Something

in js:
function DoSomething(){
alert(“some alert”);

I think it does not work anymore this way, or I can’t make it work anymore.
please help me! thanks

ops how to write the html code? it does not show up. is there a tag to use?
(I’ve removed the “a” tags, now it kinda works)

Now there is frameworks and component based methods …
Things are changed a lot bro, read the docs again :wink:

I did. I was not able to find an example of how to use a button.
maybe can you point me to the correct doc?
thank you.

Your syntax looks correct. What does the JS console say when your button fails to fire?

staring over: new simple www core fw7 with cli.
I’ve added a single button:

       <button class="button" onclick="openAlert">Button</button>

copied from dialog page of kitchensink
If I copy from ks “@click” instead of “onclick” the page don’t load
if I copy from ks the script part and paste in my home.f7.html the page don’t load
how and where do I write the “openAlert” function?
it should be something like (again from ks)

methods: {
  openAlert: function () {
    var app = this.$app;

but where do I have to put this code?
I’ve tried in app.js but it gives me errors

event attach not working in app.js file,
try it in components, (.f7.html files)

I’ve tried to put in home.f7.html, but then npm gives me errors:

SyntaxError: unknown: In strict mode code, functions can only be declared at top level or inside a block

maybe I better stay with fw7 v.1, if just using a simple button is so hard with v.5 :slight_smile:
but I suspect it’s simple instead, but I can’t find a working example…

This work for me in v5

<button class="button col button-outline color-gray display-flex button-small" id="cameraTakePicture" onClick="cameraTakePicture();">Camera <span class="material-icons font-size-21">photo_camera</span></button>

And in JS file

function cameraTakePicture() {

I’ve tried to put the function in and in home.f7.html inside tags, but the console always says:
Uncaught ReferenceError: openAlert is not defined
at HTMLButtonElement.onclick (

where exactly do I have to put the function?

check this out:

<!-- component template -->
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner">
        <div class="title">{{title}}</div>
    <div class="page-content">
      <a @click="openAlert">Open Alert</a>
<!-- rest of component data and methods -->
  // script must return component object
  export default {
    data: function () {
      return {
        title: 'your title',
    methods: {
      openAlert: function () {
        //now its working
        var self = this.$app.dialog.alert('Hello world!');
1 Like

I’ve pasted the part to the bottom of my home.f7.html, npm give me this error:

ERROR in ./src/pages/home.f7.html
Module build failed (from ./node_modules/framework7-component-loader/lib/index.js):
SyntaxError: unknown: ‘return’ outside of function (2:4)

1 | // script must return component object

2 | return {
| ^
3 | data: function () {
4 | return {
5 | title: ‘your title’,

sorry i fixed it, try that instead

thank you, it’s working now.
I had to change form “onclick” to “@click”, and I’d also like to understand why (or where in the docs is this explained)

(I’m not sure also about why I need a variable here, it seems too complicated for a simple alertbox)

I’d like also to understand if I can put the code in a js file rather than append to the html, I’d prefer to keep them separate like in fw7 v1

but anyway, thank you very much agian, now I have a starting point for the new v5 :slight_smile:

It is all explained here

I’ve already read that link, I’ll read it again, but - probably and imho - it is not that clear.
not as the components explanations.
after 2 days without any success I decided to put the question here on the forum, because I didn’t find any example about this.

i.e., I still don’t see where is the explanation of the change from “onclick” to “@click

Thanks, but I still think that docs and tutorials are weak in the js part.
One of the reply in this thread said that he uses onclick and not @click, so I’m still confused.
I know c++, mfc, c#. It’s the first time I wasn’t able to understand how to use a button.
My 2 cents. Maybe you all find docs and tutorials absolutely clear :slight_smile: