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>
</select>

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

<br>

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

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

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 addEventListener…There 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() {
  result.classList.remove("hidden");
  if (lstGenre.value == "Impressionism") {
    result.textContent = "Correct!";
    result.classList.remove("alert-warning");
    result.classList.add("alert-success");
  } else {
    result.textContent = "Try again!";
    result.classList.remove("alert-success");
    result.classList.add("alert-warning");
  }
});

.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>
  <option>Realism</option>
  <option>Impressionism</option>
  <option>Post-Impressionism</option>
</select>

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

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:

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

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

        <br>

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

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

And here’s JS that I try:

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

    //setting them to display none
    right.style.display = 'none';
    wrong.style.display = 'none';

    if (document.querySelector('#impressionism').onclick && document.querySelector('button').onclick)
    {
        document.querySelector('#right').style.display = 'block';
    }
</script>

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

Thanks!