HTML / Javascript - использование значения <select> в качестве условия

Я пытаюсь сделать так, чтобы в зависимости от того, какое значение вы выбираете из раскрывающегося списка,

а атрибуты под ним будут отображать другое. Почему не работает?

Javascript:

<script>
    function listSelect() 
    {
        var theList = document.getElementbyId(poi);
        var theValue = theList.options[theList.selectedIndex].value;
        if (theValue.includes('country'))   
        {
            document.getElementbyId('poiImage').src='images/country.jpg';
            document.getElementbyId('poiText').innerHTML='this is country';
        }
    }
</script> 

HTML:

<select id=poi onchange = "listSelect()">
    <option value = "country">Countryside</option>
    <option value = "cathedral">Cathedral</option>
    <option value = "park">Park</option>
</select>
<br/>
<img id=poiImage height=150px width=180px>
<p id=poiText></p>