CODEWITHSUNDEEP
javascripthtmlevent-handling
Sabie
Sabie

Reputation: 87

Select specific option event handler [javascript]

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!

Upvotes: 0

Views: 1300

Answers (2)

Scott Marcus
Scott Marcus

Reputation: 65808

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>

Upvotes: 1

Barmar
Barmar

Reputation: 780688

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>

Upvotes: 1

Related Questions