[SOLVED] How do I have more than 1 workable button?

username1

Sorry this is totally a newbie question. If I use the navigator style navigation, how do I get 2 buttons to go to different pages. Then how do I get 2 more buttons in each of those options to go to different pages? I got one button working.

Let’s say I want to make an app showing recipes. The home page will have breakfast and lunch, then each of those pages will have 2 recipes each that I can click to view the full recipe. How would I do that navigation?

I have a feeling that if I see the solution I’m going to be like, “Wow how the heck did I miss that.” I have BASIC HTML/ CSS/ Javascript knowledge, but for some reason this isn’t clicking for me.

jamal

@username1, see https://onsen.io/v2/api/js/ons-navigator.html

This should give you a starting point.

username1

SOLVED, but I’ll keep this up for any other people who might happen to come across a similar issue. :)

Solution: I changed the second ‘else if’ statement to an ‘if’ statement. So:

else if (page.id === ‘page1’) {
page.querySelector(’#push-button-page3’).onclick = function() {
document.querySelector(’#myNavigator’).pushPage(‘page3.html’, {data: {title: ‘Page 3’}});

changed to:

if (page.id === ‘page1’) {
page.querySelector(’#push-button-page3’).onclick = function() {
document.querySelector(’#myNavigator’).pushPage(‘page3.html’, {data: {title: ‘Page 3’}});

Original:

Thank you for the response. For some reason I’m not making the connection using the tutorial. I’ll give it more of a go. Here’s the code I tried making that didn’t work. Going to page 2 works, but when I click page 3 it doesn’t go anywhere.

<!DOCTYPE html>
<html>
<head>
<link rel=“stylesheet” href="./css/onsenui.css">
<link rel=“stylesheet” href="./css/onsen-css-components.min.css">
<script src="./js/onsenui.min.js"></script>
<script>
document.addEventListener(‘init’, function(event) {
var page = event.target;

if (page.id === ‘page1’) {
page.querySelector(’#push-button’).onclick = function() {
document.querySelector(’#myNavigator’).pushPage(‘page2.html’, {data: {title: ‘Page 2’}});
};
} else if (page.id === ‘page1’) {
page.querySelector(’#push-button-page3’).onclick = function() {
document.querySelector(’#myNavigator’).pushPage(‘page3.html’, {data: {title: ‘Page 3’}});
}} else if (page.id === ‘page2’) {
page.querySelector(‘ons-toolbar .center’).innerHTML = page.data.title;
} else if (page.id === ‘page3’) {
page.querySelector(‘ons-toolbar .center’).innerHTML = page.data.title;
} });
</script>
</head>
<body>
<ons-navigator swipeable id=“myNavigator” page=“page1.html”></ons-navigator>

<template id="page1.html">
  <ons-page id="page1">
    <ons-toolbar>
      <div class="center">Page 1</div>
    </ons-toolbar>

    <p>This is the first page.</p>

    <ons-button id="push-button">Page 2</ons-button>
    <ons-button id="push-button-page3">Page 3</ons-button>
  </ons-page>
</template>

<template id="page2.html">
  <ons-page id="page2">
    <ons-toolbar>
      <div class="left"><ons-back-button>Page 1</ons-back-button></div>
      <div class="center"></div>
    </ons-toolbar>

    <p>This is the second page.</p>
  </ons-page>
</template>
<template id="page3.html">
    <ons-page id="page3">
      <ons-toolbar>
        <div class="left"><ons-back-button>Page 1</ons-back-button></div>
        <div class="center"></div>
      </ons-toolbar>
  
      <p>This is the third page.</p>
    </ons-page>
  </template>

</body>
</html>

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

[SOLVED] How do I have more than 1 workable button?