Select specific option event handler [javascript]

Question

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!

Just use an event listener for the submit button. It can check the value of the dropdown. — Barmar, Oct 09 '20 at 17:07
That's not even close to the right way to write an event handler. — Barmar, Oct 09 '20 at 17:08
You need to assign a function to `onclick`, it's not something you check with `if`. — Barmar, Oct 09 '20 at 17:08
Add onchange event to the select, look at the value selected. Basic form operations. — epascarello, Oct 09 '20 at 17:13
`document.querySelector('#impressionism').onclick` has nothing to do it the user clicks..... it is saying does this thing have a property 'onclick' — epascarello, Oct 09 '20 at 17:13
@barmar thanks! how do I check for the specific dropdown value? I tried `document.querySelector('button').onclick = function() { document.querySelector('#right').style.display = 'block'; }` before, but it works only for submit regardless of dropdown — Sabie, Oct 09 '20 at 17:13
@epascarello thanks! but how do I look at the value selected? I know these are basics but just because it's too basic but I've spent a couple of hours and still can't find anything pretty easy to understand here — Sabie, Oct 09 '20 at 17:21
@Barmar @epascarello Could someone please confirm if there's any difference between `document.querySelector('button').addEventListener("click", function() {... ` if value etc. and `document.querySelector('button').onclick = function() {...` ? I tried both now, and they both seem to work — Sabie, Oct 09 '20 at 18:29
@Sabie See my answer below for a better solution to your original question and an reply about your comment above. — Scott Marcus, Oct 09 '20 at 18:44

score 1 · Accepted Answer · answered Oct 09 '20 at 17:23

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

answered Oct 09 '20 at 17:23

Barmar

741,623
53
500
612

Thanks @barmar! That was really super helpful! 2 comments: 1) do I need this `document.querySelector("#wrong").style.display = "none"` if you've shown we can add style="display: none" as attribute inline? 2) what's the difference then between `.addEventListener("click", function() {...` and `.onclick = function() {...`? I don't fully grasp it – Sabie Oct 09 '20 at 17:50
Why scan the DOM for the same elements over and over? Also, why give the `option` elements a `value`? Their `value` will become their `textContent` if you don't specify a `value`. Also, just use a CSS class for the show/hide part and then simply use `.classList` to toggle. – Scott Marcus Oct 09 '20 at 18:02
@ScottMarcus hi there! you mean I can do `if (document.querySelector("#genre").textContent === "Impressionism") `? instead of checking for value? – Sabie Oct 09 '20 at 18:07
1

@Sabie Yes, or you can still check `.value` even without adding the `value` attribute because the `value` of an `option` will be set to whatever the text of the `option` is by derfault. – Scott Marcus Oct 09 '20 at 18:13
@Sabie I change them to `none` so when you change your answer it only shows one of the DIVs at a time. – Barmar Oct 09 '20 at 19:01
@Sabie You can't use `textContent` for a ` – Barmar Oct 09 '20 at 19:01

Scott Marcus · Answer 2 · 2020-10-09T18:52:31.897

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>

Select specific option event handler [javascript]

2 Answers2