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

New Contributor
Posts: 3
Registered: ‎05-05-2013
My Device: Q10
My Carrier: Viettel
Accepted Solution

bbui,js onclick event

I have this code :


<!DOCTYPE html>
<div data-bb-type="screen" data-bb-effect="slide-down" id="introduction">
<style type="text/css">
#main {
width: 100%;
background-color: lightblue;
text-align: center;
<div data-bb-type="title" data-bb-caption="Giới thiệu" data-bb-back-caption="Quay lại"></div>
<div id="main"></div>
<div data-bb-type="action-bar">
<div data-bb-type="action" data-bb-style="tab" data-bb-overflow="false" data-bb-img="image/action_bar.png" id="first">First</div>
<div data-bb-type="action" data-bb-style="tab" data-bb-overflow="false" data-bb-img="image/action_bar.png" id="second" onclick="alert('Second')">Second</div>
<div data-bb-type="action" data-bb-style="tab" data-bb-overflow="false" data-bb-img="image/action_bar.png" id="third" onclick="changeContent(this)">Third</div>
<script src="script/introduction.js"></script>


and a js file :


function changeContent(button) {
content = button.getAttribute("id");

document.getElementById("first").setAttribute("onclick", "changeContent(this)");


I have an action bar with 3 tabs .Have a look at my code, my problem is :

- The 2nd and 3rd tabs with onclick event, they work perfectly

- The 1st tabs, I set onclick event in the js file, and it does not work. So what is the problem,I must and only can use onclick inside the div ?

Posts: 1,561
Registered: ‎04-12-2010
My Device: BlackBerry Z10
My Carrier: Bell

Re: bbui,js onclick event

When you call document.getElementbyId, you are assuming that the element has been added to the DOM (existing in an HTML file is not enough.)


My guess is that the getElementById call is failing because the HTML5 content (your screen) has not been added to the DOM yet.


Where do you call:

document.getElementById("first").setAttribute("onclick", "changeContent(this)");


You should be doing this in your bb.init ondomready or onscreenready functions; one or the other. In there, check that the screen you are loading is the desired screen, and then instead of document.getElementById, use element.getElementById.


element is an argument passed to both the ondomready and onscreenready functions, which represents your actual screen (i.e. the HTML content of your screen.) So the tabs will exist there, but they don't exist on the DOM until BBUI actually adds the content to the DOM.


That can be a little confusing; let me know if I didn't explain that clearly.

Erik Oros | @WaterlooErik | eoros@blackberry.com | Developer Issue Tracker

If a reply has answered your question, please click Accept as Solution to help other visitors in the future.
New Contributor
Posts: 3
Registered: ‎05-05-2013
My Device: Q10
My Carrier: Viettel

Re: bbui,js onclick event

This worked, tks to your help ! Smiley Happy