Software Archive
Read-only legacy content
Announcements
FPGA community forums and blogs have moved to the Altera Community. Existing Intel Community members can sign in with their current credentials.

Can't set button label. Bug?

Juan_C_
Beginner
1,026 Views

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.

0 Kudos
1 Solution
Diego_Calp
Valued Contributor I
1,026 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

0 Kudos
3 Replies
Diego_Calp
Valued Contributor I
1,026 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

0 Kudos
Juan_C_
Beginner
1,026 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!

0 Kudos
Diego_Calp
Valued Contributor I
1,027 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.

0 Kudos
Reply