Solution 1 :

Give the options values and assign an ID to the <select> then you can check the value of the dropdown in the event listener for the submit button.

Also, display is not an attribute, it should be style="display: none"

document.querySelector("#submitBtn").addEventListener("click", function() {
  if (document.querySelector("#genre").value == "impressionism") {
    document.querySelector("#right").style.display = "block";
    document.querySelector("#wrong").style.display = "none";
    } else {
    document.querySelector("#wrong").style.display = "block";
    document.querySelector("#right").style.display = "none";
<select id="genre">
  <option value="realism">Realism</option>
  <option value="impressionism">Impressionism</option>
  <option value="post">Post-Impressionism</option>
  <option value="default" selected>Choose your answer</option>

<button id="submitBtn" class="btn btn-primary" type="submit">Submit</button>


<div id="right" class="alert alert-success" role="alert" style="display: none">
  Well done!

<div id="wrong" class="alert alert-warning" role="alert" style="display: none">
  Try again!

Solution 2 :

Barmar’s answer gets the job done, but there’s a lot of extraneous and unnecessary code there.

  • You don’t need to set the value attribute of an option element to
    be able to access the option.value because the .value of an
    option will be its text by default.
  • You shouldn’t re-query the document over and over again for the same
    elements – that’s just a waste of time and resources. Get references
    you’ll need many times just once.
  • Avoid using inline styles because they cause you to have to
    write redundant code (which doesn’t scale well) and inline styles are
    the hardest to override later if you need to. Instead, always try to
    use CSS Classes, which can then be easily added or removed with the
    .classList API.
  • You are not actually submitting data anywhere, so you should use a
    regular button, not a submit button.
  • You don’t need to set up two separate areas for the results to
    appear. You can just have one area and dynamically set the text
    within it and the styling of it.
  • You asked about the difference between setting onclick and
    using addEventListenerThere are differences and you should
    be using the modern .addEventListener.
let lstGenre = document.querySelector("#genre");
let result = document.querySelector("#result");

document.querySelector("button[type='button']").addEventListener("click", function() {
  if (lstGenre.value == "Impressionism") {
    result.textContent = "Correct!";
  } else {
    result.textContent = "Try again!";
.hidden { display:none; }
.alert { border:1px solid black; }
.alert-success { background-color:green;}
.alert-warning { background-color:yellow;}
<select id="genre">
  <option value="" selected>Choose your answer</option>

<button class="btn btn-primary" type="button">Submit</button>
<div id="result" class="alert hidden" role="alert"></div>

Problem :

I’m super new to javascript.

I’m trying to make a piece of code that shows a success alert when a user clicks on a specific item in a drop-down menu AND clicks submit button (and warning alert for other items +submit)

Here’s the html part:

            <option id="realism">Realism</option>
            <option id="impressionism">Impressionism</option>
            <option id="post">Post-Impressionism</option>
            <option id="default"selected>Choose your answer</option>

        <button class="btn btn-primary" type="submit">Submit</button>


        <div id="right"class="alert alert-success" role="alert" display="none">
          Well done!

        <div id="wrong"class="alert alert-warning" role="alert">
          Try again!

And here’s JS that I try:

    //defining variables
    let right = document.querySelector('#right');
    let wrong = document.querySelector('#wrong');

    //setting them to display none = 'none'; = 'none';

    if (document.querySelector('#impressionism').onclick && document.querySelector('button').onclick)
        document.querySelector('#right').style.display = 'block';

The 2 last lines won’t work and I don’t understand why. I tried already onclick, onchange and other options.



Comment posted by Barmar

Just use an event listener for the submit button. It can check the value of the dropdown.

Comment posted by Barmar

That’s not even close to the right way to write an event handler.

Comment posted by Barmar

You need to assign a function to

Comment posted by epascarello

Add onchange event to the select, look at the value selected. Basic form operations.

Comment posted by epascarello


Comment posted by Sabie

Thanks @barmar! That was really super helpful! 2 comments: 1) do I need this

Comment posted by Scott Marcus

Why scan the DOM for the same elements over and over? Also, why give the

Comment posted by Sabie

@ScottMarcus hi there! you mean I can do

Comment posted by Scott Marcus

@Sabie Yes, or you can still check

Comment posted by Barmar

@Sabie I change them to