Using HTML dropdown user input in a javascript function

Hello. I am creating a random, self-generating math question. Currently, I am trying to make it so that the user can answer “Yes” or “No” using via a dropdown created by HTML (line 4 in the HTML panel). Then, I used document.getElementById (line 29, JavaScript panel) to get that user input value into javascript where I use it in a function to check their answer (starts at line 32, JavaScript panel).

When I hit submit it tells me “Not Found”. How do I fix this?

Here is my code: https://codepen.io/KDalang/pen/OJpEdQB

Thanks!
Side note, should I be able to post this on multiple topics? I feel like this could either be in HTML-CSS or JavaScript.

Hello @KDalang , a couple of things that confuses me:

1-

var input = document.getElementById("plzwork");

You seems to think that this will return your input, but as a matter of fact that’s the whole form element.

<form id="plzwork">
  <label for="studentAns">Yes or no?</label>
  <select name="studentAns" id="studentAns">
    <option value="-">-</option>
    <option value="Yes">Yes</option>
    <option value="No">No</option>
  </select>
  <input type="submit" value="Submit">
</form>

2 -

if ([...] && input=="Yes")

What exactly do you expect that comparison to be?
getElementById returns an Element, how exactly do you plan it to be equal “Yes”?

There are various ways to get the value either from a form or directly from an input, I suggest you research a bit on them.

3 -

<input type="submit" value="Submit">

You are actually try to submit the form, which has a very specific behavior by default on browsers, and generally is a server/client communication. Without any specification the default behavior is to make a GET request to the same page.

If you want to bypass that you can by preventing the default behavior upon submission.

Hope this helps :sparkles:

These are great questions that I barely know the answer to!

  1. Yeah that was me messing around to see what would work. I tried setting var input to the select and tried again with the submit input before and neither worked. What should I do there?

  2. Right I forgot that returns an element. How can I get the value of that?

  3. It’s been about 2-3 days since I started JavaScript so what you said doesn’t mean much to me. What I’m getting is that that line is wrong and is not going to work for my purposes. A bit of googling shows me what you mean by “preventing the default behavior”. Once I do this and fix the rest of the mess, would this submit button do what I want it to do which is letting the user submit their answer and let the check function run?

The purpose of my question was indeed to let you do your own research and learning :slight_smile:

  • to get a value from an input you can simply use the value property:
document.getElementById("my-input").value
  • If you want to take ownership of the form submission you have to first add an event listener to the form itself:
  const f = document.querySelector("form");
  f.addEventListener("submit", onSubmit)

Then you can do your own logic inside the function that gets called upon submission:

function onSubmit(event) {
  // prevent the default browser behavior with preventDefault()
  event.preventDefault()

 // then you can do whatever logic you need
 [...your business logic]
}

Finally a note:

would this submit button do what I want it to do which is letting the user submit their answer and let the check function run?

As I mentioned before the default usage of a form is to send data somewhere to a server, for it do some logic.
So for example your app can easily work by sending the data to a server, make the check logic there and then reply to the client with the outcome.

However I image that you actually want your checking logic to be on the client side. That’s why you need the extra complication of “intercepting” the submission event and run your logic directly in the client.

Hope this clarify things a bit :slight_smile:

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.