Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Stu Cowley
26,287 PointsHow Do I Use the <select onChange> Element to Change Content of a Page?
Hey guys,
I'm wondering if anyone has had any experience using the this HTML element
<select onChange="myFunction();">
I'm looking to add some functionality to a sports fixture page on a site I am currently building. I want the user to be able to select a round and within the containing area content appears depending on what round is selected from the select element.
I have found an example of exactly how I would like this to work.
I have seen many examples and I just can't seem to find anything that works similar to the above site.
I've had a look through the source code of the site but alas it's all been minified so I can't get a grasp on how this would've been achieved.
Any advice on how I can get this done would be greatly appreciated.
Stu : )
4 Answers
haunguyen
14,985 PointsYou need to add the () to myFunction --> select onChange="myFunction()"
example here http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onchange
You would have to create the HTML for your content, and have the myFunction manipulate the behavior of the HTML, but the onChange attribute is straight forward.
Stu Cowley
26,287 PointsHi haunguyen,
I've had a look at the example over at W3 Schools, but being a total noob to JavaScript I'm not really all that sure what to do to make it do what I'm looking for.
haunguyen
14,985 PointsYou can create codes in the myFunction() to do what ever you want, you just have to look up how to do certain tasks.
For example, inside the myFunction(), you could make an ajax call to retrieve data from twitter and display the twitter data in your html layout.
You would need to have a general sense of what kind of data and the source of data and how to design the layout before you can put them together.
Stu Cowley
26,287 PointsYou're a absolute champ Dave McFarland! Thanks so much for that :)
Stu : )
Stu Cowley
26,287 PointsMaybe Dave McFarland or Andrew Chalkley could give me a hand on this one : )
Dave McFarland
Treehouse TeacherHi Stu,
See my comment under your original post.
Dave McFarland
Treehouse TeacherDave McFarland
Treehouse TeacherHi Stu,
I checked out the page you linked to. The "Round" dropdown menu on that page doesn't use JavaScript to update the page. Selecting an option from the menu submits information to their server, which is retrieving data from a database, then sending back a new page.
Here's an online tool that can help "de-minify" JavaScript code: http://jsbeautifier.org/ It's not a perfect solution, because it can't replace variable names that have been changed by a minifier, but at least it breaks the code over multiple lines and indents where needed.