问如何在与引导程序下拉菜单链接时使用Javascript if语句

EN

HTML: 

    <!--Drop down Item 1 -->
<h3 class="display-4" style="font-size: 1.5rem;">What is your eye color</h3>
<div class="dropdown">
  <button class="btn btn-info btn-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="background-color: #588c7e;">
    Eye Color
  </button>

  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#"><img src="img/brown_eye.jpg" class="rounded-circle" value="brown"> Brown</a>
    <a class="dropdown-item" href="#"><img src="img/blue_eye.jpg" class="rounded-circle" value="blue"> Blue</a>
    <a class="dropdown-item" href="#"><img src="img/green_eye.jpg" class="rounded-circle" value="green"> Green</a>
    <a class="dropdown-item" href="#"><img src="img/hazel_eye.jpg" class="rounded-circle" value="hazel"> Hazel</a>
  </div>

</div>


<!--Drop down Item 2-->
<h4 class="display-4" style="font-size: 1.5rem;"> What is your skin tone</h4>
<div class="dropdown">
  <button class="btn btn-info btn-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="background-color: #588c7e;">
    Skin Tone
  </button>

  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton" onchange="dropdownChange();">
    <a class="dropdown-item" href="#"><img src="img/fair.jpg" class="rounded-circle" value="fair"> Fair (porcelain)</a>
    <a class="dropdown-item" href="#"><img src="img/light.jpg" class="rounded-circle" value="light"> Light (fair to light)</a>
    <a class="dropdown-item" href="#"><img src="img/medium.jpg" class="rounded-circle" value="medium"> Medium (light to medium)</a>
    <a class="dropdown-item" href="#"><img src="img/bronze_dark.jpg" class="rounded-circle" value="bronze"> Bronze dark (deep tan)</a>
    <a class="dropdown-item" href="#"><img src="img/tan.jpg" class="rounded-circle" value="tan"> Tan (warm to medium)</a>   
    <a class="dropdown-item" href="#"><img src="img/dark.jpg" class="rounded-circle" value="rich"> Rich (deep)</a>
  </div>

</div>

<br>

<!--Result-->
<button type="button" class="btn btn-info btn-lg active" style="background-color: #3e4444;"> Submit</button>

JS: 

    function validate()   {
var a =document.getElementById("eye_color").value;
var b =document.getElementById("skin_tone").value;
if (a == "green" && b == "fair"){
alert("Brown is your best hair color!!");
}    
}