Can't set button label. Bug?

[Juan_C_]

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.

[Diego_Calp]

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_]

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 · Accepted solution]

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.