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

JavaScript

how to receive value from HTML and pass to function using conditional statement in Javascript :(

I am building a Snowboard size calculator. I have a problem getting the info from input from HTML to function with conditional statement in JavaScript.

<!DOCTYPE html> <body> <section> <div id="boss" class="burton"> <!-- I am adding background image form css but this is not the issie--> <h1>This web-site will calculate the range of snowboard size base of your height. </h1> <div class="background"> <label>How tall are you ? </label> <!-- Selecting your height--> <select id="myList"> <option value = "109cm">109cm or 3’7β€³(ft/in)</option> <!-- the JavaScript can read it :(--> <option value = "124cm">124cm or 4’1β€³(ft/in)</option> </select> <!--after clicking submit btn you should recive info with your recomand snowboard size--> <input type="button" value="submit" class="btn"> </div> </div> </section> <script> /* crerate function with conditional statement to calculate size of snowboard base of your height passed from HTML value / function snowboardSize() { var snowboard = document.getElementById("myList").value; / his is were error coming. I tried inside string value "109cm" add number 109 but didn't work. Even thought swith statement might be better for it I want to build it first using a function as I am newbie and learning. I have been stuck with it work weeks :( */ if (value === "109cm") { document.write("Your snowboard size is between 90cm and 105cm" ); } else if (value === "124cm" ) { document.write("Your snowboard size is between 110cm and 120cm" ); } else { document.write("Lake Tahoe is one of the best spots in the world lol.") } } window.onload = document.getElementById('myList').onsubmit = snowboardSize;

</script>

</body> </html>

3 Answers

Steven Parker
Steven Parker
243,134 Points

When posting code, use "Markdown" formatting. There's a pop-up "cheatsheet" below, or you can watch this video on code formatting.

But I think I've been able to spot the issues this time anyway:

  • the select's value is assigned to "snowboard" but the other code is referencing "value" (undefined)
  • the statement to be performed on window load needs to be wrapped in a function
  • the "snowboardSize" event handler should be attached to the "onclick" of the button

Another approach would be to use an input type of "submit" instead of "button", wrap the controls in a "form" element, and attach the event handler to the "onsubmit" of the form instead of the select.

First-evolve thank You for such a fast response. Second-evolve sorry for passing unclear code to comments.. ( I didn’t know how to do it. I saw how chaotic is to pass this to a text editor and make it code readable, from now one I know how to make comments in order to make code readable ) That’s being said I am extremely grateful for doing extra work in order to help me.

Finally, the code start working and I just made my first working program in JavaScript where the idea comes in my mind to build. This opening the door for me to explore more and learn more. Without your help, I might give up as I have been working on this project for quite some time.

Again big thanks and enjoy your day. Cheers :)

Steven Parker
Steven Parker
243,134 Points

Glad I could help.

Also, I'm unfamiliar with your use of the word "evolve" (with "first" and "second"). Can you briefly explain that in other words?

Happy coding!

Silly of me... lol. English is not my first language and on top of that, I have dyslexia. I was replying to your comment very quickly before catching my train. Having said that, I was rushing with my respond without checking out my spelling with came out very unprofessional. For with I apologize.

`To make this story funny for you with I am sure I will make you laugh πŸ˜‚ πŸ˜†
Instead of " First-evolve " I was meaning - First of all... instead of "Second-evolve" - "second of all" ... and so on... I am sure that makes you laugh.. I am so embarrassed 😩 . Hey BTW Thanks to your tips I made this code working as well with Switch statement :)

Again I really appreciate your help it's mean a lot to me :) Enjoy rest of your day :)

Steven Parker
Steven Parker
243,134 Points

It makes sense now that you explained it .. and yes, it also gave me a chuckle. :wink:

Cheers!