Javascript addEventListener does not work on Chrome but Firefox

Question

I think I am trying something very easy but it does not work on Chrome but on Firefox.

Depending on the value of my combo box order-type I want to show the field nameField. Therefore, I have a JavaScript file, which has a Listener on changes. When I change now a value in the combo box in Firefox the nameField appears and I get a console message. In Chrome I don’t get anything at all.

My PHP file looks like this:

                            <select name="order-type" id="order-type">
                                    <option selected="selected">Choose one</option>
                                    <?php
                                    $products = array("Value1", "Value2", "Value");

                                    foreach($products as $item){
                                    ?>
                                    <option value="<?php echo strtolower($item); ?>"><?php echo $item; ?></option>
                                    <?php
                                    }
                                    ?>
                            </select>
                        </p>
                        <div id="nameField" style="display: none;">
                            <label for="userName">User name *</label>
                            <input id="userName" name="userName" type="text" class="required" autocomplete="username">
                        </div>
…
<script src="js/script.js" defer></script>

Script.js:

    var form = $("#my-form");

form.validate({
    errorPlacement: function errorPlacement(error, element) { element.before(error); },
    rules: {
        confirm: {
            equalTo: "#password"
        }
    }
});
form.children("div").steps({
    headerTag: "h3",
    bodyTag: "section",
    transitionEffect: "slideLeft",
    onStepChanging: function (event, currentIndex, newIndex)
    {
        form.validate().settings.ignore = ":disabled,:hidden";
        return form.valid();
    },
    onFinishing: function (event, currentIndex)
    {
        form.validate().settings.ignore = ":disabled";
        return form.valid();
    },
    onFinished: function (event, currentIndex)
    {
        form.submit();
    }
});

var comField = document.getElementById("order-type");

comField.addEventListener("change", function(){

    console.log("Combox Box");
    console.log(comField.value);
  if(comField.value.toLowerCase() == ("Value1").toLowerCase()){
    console.log("Value1");
    document.getElementById("nameField").style.display = "block";
  } else {
    console.log("other");
    document.getElementById("nameField").style.display = "none";

  }
});

Any ideas?

Thanks

Stephan