Community
cancel
Showing results for 
Search instead for 
Did you mean: 
Juan_C_
Beginner
69 Views

Can't set button label. Bug?

Jump to solution

Hey all,

I'm new to HTML5, Javascript and XDK, so maybe I'm making a mistake here.  I'm trying to reset the label of a button.  Try this:

1)Create new XDK project with blank HTML5+Cordova template, App Framework, and App Designer

2) Using App Designer, insert one button, with id="button"

3) Add the following on app.js 

 function register_event_handlers()
 {
     document.getElementById("button").addEventListener("touchend",function(){document.getElementById("button").value = "Worked!";}, false);
 }
 document.addEventListener("app.Ready", register_event_handlers, false);

4) Clicking on the button using emulate does not change the button label to "Worked!".  Setting the button's 'enabled=false' instead of 'value' doesn't work either.  

What am I doing wrong?

Thanks.

Tags (2)
0 Kudos
1 Solution
Diego_Calp
Valued Contributor I
69 Views

Look for DOM documentation, but my suggestion is go for jquery to DOM manipulation. XDK includes it in AF3 projects.

For example, the same code with jquery:

$("#button").html("Worked!");

jquery make easier to access every element of the DOM, the model besides web pages.

View solution in original post

3 Replies
Diego_Calp
Valued Contributor I
69 Views

Hi,

No bug, the problem is that the App Framework button is not an input type element that has a value property.

If you look at index.html your button is something like this:

<a class="button widget uib_w_1 d-margins" 
data-uib="app_framework/button" data-ver="2" 
id="button">Button</a>

You need to change the innerHTML, this is the correct line:

document.getElementById("button").innerHTML = "Worked!";

Regards,
Diego

Juan_C_
Beginner
69 Views

I see, thank you.  How would I do other things like set the button to disabled?

Where can I find documentation on this?

Thanks!

Diego_Calp
Valued Contributor I
70 Views

Look for DOM documentation, but my suggestion is go for jquery to DOM manipulation. XDK includes it in AF3 projects.

For example, the same code with jquery:

$("#button").html("Worked!");

jquery make easier to access every element of the DOM, the model besides web pages.

View solution in original post

Reply