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

need help using user input

Hey guys, I've built a function that will have hard coded arrays. the user will be given an option to choose an item which will equal an array in the script to be run. I am not sure how to do this. i tried prompt but that only returns a string. I am thinking a radio button?

simply--i want to take a user input and have it "activate" an array to be used in the function. thanks Justin

5 Answers

Hi Justin Riley,

As usual there are a few ways to accomplish what I think is your desired outcome. You've not described how you want to get the user input so I won't give an example ... but generally there is defined/expected feedback of user input (whether that be type, or value, or id of element clicked etc.) e.g.

  • if the user selects a radio button you can detect which has selected ( if any - should have a default to save having to error check that :smile: )
  • if the user enters data you can capture what was entered (validate against accepted responses)
  • if the user clicks the 'redArray' button instead of the 'blueArray' button you can determine which button was clicked

However you choose capture the user input you could then use something like a switch statement or if/else if/else to call your function, passing only the required array to it based on the user input. If checking based on which element(most likely button) was clicked, then call your function with the relevant array passed directly from the button click (no need to run a switch or the like, as the users choice of button to click defined the array to pass)

It's just one way of course, but first that sprang to mind. If you want a specific example let us know.
Happy coding :smile:
Dave :dizzy:

Hi Justin Riley,

Not seeing a text or number input there. perhaps you've not committed local changes to the repo yet?
Either way ... here's a little snippet that might help (if it's what I think you're asking - little confused)

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="some.js"></script>
</head>
<body>
    Enter recipe weight:
    <input type="text" id="weight">
    <button onClick="captureWeight()">Click to Capture!!</button>
</body>
</html>
let recipeWeight = 0;

function captureWeight() {
    recipeWeight = document.getElementById('weight').value;
    alert('recipeWeight is: ' + recipeWeight); 
    // if user enters 10, you'll get an alert box showing 'recipeWeight is: 10'
}

Obviously you can use a number input type instead of text, you can get the value from the form field by name instead of id etc (or capture the form them break it up in the JS t save hitting the DOM a lot - depending on how much you're grabbing). This was just quick and dirty to show you how to get the data out of the input field to use in the JS. In this case I just popped up an alert box and used the captured data in it ... you probably want to validate it though :smile:

Does that help, if not can you maybe explain a little more, or a wireframe to indicate what the user will see etc.

Hope it's OK, and I look forward to seeing the completed 'app'
Dave :dizzy:

Thanks Dave, now to figure out how to do it lol! part of the game. Im thinking check boxes so multiple options can be chosen and printed to the page.

Thanks Justin

ok, im stumped. here is the repo to my "app"

please ignore the mess. for the time being my goal is to log the number input for the text input as recipeWeight variable. I feel almost there.

https://github.com/jughead32/recipe-size.git

thanks for any advice.

Yes! that is what I had in mind. I missing the on click aspect thanks again! Justin