Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Posts: 370
Registered: ‎07-20-2012
My Device: Blackberry Z10 (White), BlackBerry Dev Alpha C
My Carrier: O2 UK

Help needed with BBUI.js, math problem




Hi! I have been developing a tip calculator application, the only problem is that I have no idea how to do maths in HTML5. What I would like to do is, have the number (inputted by the user in the top text bar) divided by the number (on the slider) to then output the required amount for the tip. As well as that, I would like to get a total for the whole thing, so, the total (inputted by the user in the top text bar) + the tip, and then divided by the amount of people, to give an overall total in the final box at the very bottom. 


Here is my code for the page: 


<meta name="viewport" content="width=device-width" />
<div data-bb-type="screen" data-bb-effect="fade">
<div data-bb-type="title" data-bb-caption="Calculate Tip" ></div>
<div data-bb-type="menu">
    <div data-bb-type="menu-item" data-bb-img="images/ic_help.png" data-bb-pin="left" onclick="bb.pushScreen('help.html', 'Help');">Help</div>
    <div data-bb-type="menu-item" data-bb-img="images/ic_settings.png" onclick="bb.pushScreen('settings.html', 'Settings');">Settings</div>
    <div data-bb-type="menu-item" data-bb-img="images/ic_info.png" data-bb-pin="right" onclick="bb.pushScreen('about.html', 'About');">About</div>
 <div data-bb-type="round-panel"> 
          <div data-bb-type="panel-header">Tip Calculator</div>
Enter the bill amount for your meal: $
<input type="text" id="bill"><br>
Tip Percentage: 
<input id="slider" type="range" min="0" max="100" step="1" value="0" style="position: relative; left: 5%; width: 90%;" onchange="document.getElementById('percentbox').innerHTML = this.value" />
<a id="percentbox">0</a>%
<h2>Tip to leave = <span id="tip"></span></h2>
<h2> Sharing Between: </h2>
     <option value="1" selected="true">One</option>
     <option value="2">Two</option>
	 <option value="3">Three</option>
	 <option value="4">Four</option>
	 <option value="5">Five</option>
	 <option value="6">Six</option>
	 <option value="7">Seven</option>
	 <option value="8">Eight</option>
	 <option value="9">Nine</option>
	 <option value="10">Ten</option>

<h1>Total<Input type="Text" id="bill" + "tip"></h1>


    <div data-bb-type="action-bar">
<div data-bb-type="action" data-bb-style="tab" data-bb-overflow="true" data-bb-img="images/148.like.png" onclick="bb.pushScreen('attribution.html', 'Attribution');">Attribution</div>

<div data-bb-type="action" data-bb-style="button" data-bb-img="images/185.Pocket1.png" onclick="bb.pushScreen('menu.html', 'Menu');">Tip</div>
<div data-bb-type="action" data-bb-style="button" data-bb-img="images/ic_share.png" onclick="bb.pushScreen('recommend.html', 'Recommend');">Recommend</div>

<div data-bb-type="action" data-bb-style="button" data-bb-overflow="true" data-bb-pin="true" data-bb-img="images/ic_cancel.png" >Close</div>
        <div data-bb-type="action" data-bb-style="button" data-bb-overflow="true" data-bb-pin="true" data-bb-img="images/150.Utensils.png" onclick="bb.pushScreen('nearbyrestaurants.html', 'Near-by Restaurants');">Near-by Restaurants</div>
		<div data-bb-type="action" data-bb-style="button" data-bb-overflow="true" data-bb-pin="true" data-bb-img="images/058.Notes.png" onclick="bb.pushScreen('shazam.html', 'Shazam');">Shazam</div>

 I hope that somebody can help me with working out how to do maths in HTML and link everything together, than you very much in advance! 


Kind regards

Posts: 1,229
Registered: ‎03-20-2011
My Device: Playbook, Z10 LE, Dev Alpha B, 2x Dev Alpha C
My Carrier: 3, Orange, Vodafone

Re: Help needed with BBUI.js, math problem

HTML can't do math - JavaScript has the basics


There is a useful library @ mathjs that should get you off the ground

Click the like button if you find my posts useful!