Taking value from HTML select statement for a JS If Statement

I'm running into a little trouble trying to determine the value of an HTML select object.

I've got 2 items, which I'm putting down as Value 1 or Value 2, however any method I try just returns "Undefined" when printed to console

Here is my HTML:

                <select name="catid" id="catid">
                <option value="1">Category</option>
                <option value="2">Product</option>
            </select>

I've tried the following JS options:

 var catId = document.getElementById('catid').value;

And

var catId = document.getElementById('catid');
 var catCheck = catId.options[catId.selectedIndex].value;

However when I console.log(catId.Value) or console.log(catCheck.value) (I'm obviously not trying both at the same time) I just returned an "Undefined" value.

I want to run an IF ELSE statement based on this variable, so ideally I'd like it to be able to pick up at least one of the two values!

Likelihood is I've made a dumb mistake and just can't see the wood for the trees but any help would be appreciated