如何将图像的alt与Javascript中选择框中的选定值相匹配？

我想做的是，当我输入食物的名称并选择它的属性时，点击eat应该会删除符合我提到的标准的图片。然而，我正在键入cookie并选择水果，但图像仍在删除，我不知道为什么。 这是HTML代码

Name of Food: <input id="foodname" type="text" />
        Food Group:
            <select id="foodgroup">
                <option>fats</option>
                <option>fruit</option>
                <option>meat</option>
                <option>veggies</option>
                <option>dairy</option>
            </select>
            <button id="eat" onclick="Hide()"> Eat!</button>
    </div>
        <p>
            <img src="images/cookie.jpg" name="cookie" id="cookie" alt="fats" />
            <img src="images/apple.jpg" name="apple" id="apple" alt="fruit" />
            <img src="images/broccoli.jpg" name="broccoli" id="broccoli" alt="veggies" />
            <img src="images/tomato.jpg" name="tomato" id="tomato" alt="fruit" />
            <img src="images/drumstick.jpg" name="steak" id="steak" alt="meat" />
            <img src="images/milkjug.jpg" name="milk" id="milk" alt="dairy" />
            <img src="images/potatochips.jpg" name="chips" id="chips" alt="fats" />
        </p>

var sel1=$（“foodgroup”）。选项[0]。值

应该是

var sel1=$（“foodgroup”）.value
谢谢你，它起作用了，但我不明白是怎么回事
function $(id){
  return document.getElementById(id);
}

function Hide(){
    Hide1();
}
function Hide1(){
    var foods = $("foodname").value;
    var sel1 = $("foodgroup").options[0].value;
    var aaa = $("cookie").name;
    var aa = $("cookie");
    var a =  $("cookie").alt;
    
    if ((foods==aaa) && (sel1==a)){
        aa.style.visibility = 'hidden';
    }
}