JavaScript代碼不執行？

Question

我正在做一個項目。 我正在嘗試編寫代碼，以便當用戶從下拉菜單中提交選項時，如果用戶選擇並提交了默認選項（“選擇類型”），則不會提交表單，也不會刷新頁面。 以下是我的Javascript代碼：

<script>

    var menu = document.getElementById("submit");
        menu.addEventListener("click", function() {
            if (document.getElementById("dropdown").value == 'nothing')
            {
                return false;
            }
        });

</script

這嵌套在head標簽內。

以下是表單的HTML代碼：

<div>
    <form method="POST">
        <select id="dropdown" name="genre">
            <option value="nothing">Select a genre</option>
            <option value="rock">Rock</option>
        </select>
        <br/>
        <br/>
        <input id="submit" type="submit"/>
     </form>
</div>

javascript似乎不起作用，因為即使我在選擇“選擇類型”選項時提交表單，我的表單仍會提交，而python代碼確實適用於值“ nothing”，這會產生錯誤。

編輯：通過添加更多的javascript代碼為我的項目添加更多功能后，javascript代碼再次無法正常工作。 我使用了谷歌瀏覽器的開發人員工具，偶然發現了這個錯誤，該錯誤似乎與代碼無法正常工作的原因有關：

Uncaught TypeError: $(...).addEventListener is not a function
    at (index):18

Answer 1

嘗試event.preventDefault() ：

 var menu = document.getElementById("submit"); menu.addEventListener("click", function(event) { if (document.getElementById("dropdown").value == 'nothing') { event.preventDefault(); } }); 

 <div> <form method="POST"> <select id="dropdown" name="genre"> <option value="nothing">Select a genre</option> <option value="rock">Rock</option> </select> <br/> <br/> <input id="submit" type="submit"/> </form> </div> 

Answer 2

如果您不綁定到$( document ).ready()或使其成為self-invoking function ，則這只是Code的聲明。

第一個解決方案：

    $( document ).ready(functino(){
        var menu = document.getElementById("submit");
            menu.addEventListener("click", function() {
                if (document.getElementById("dropdown").value == 'nothing')
                {
                    return false;
                }
            });
    });

另一個解決方案：

(function(){
var menu = document.getElementById("submit");
        menu.addEventListener("click", function() {
            if (document.getElementById("dropdown").value == 'nothing')
            {
                return false;
            }
        });
}());