无法从 html 按钮调用 js 函数答案

【问题标题】：Cannot call js function from html button无法从 html 按钮调用 js 函数
【发布时间】：2014-09-07 01:54:17
【问题描述】：

我正在编写一个程序来创建一个带有一串食物的 cookie。按下提交后，任何已被复选框的食物都应收集到一个字符串中，然后记录到文档的 cookie 中。然后 alert() 显示我的 cookie 以进行调试。

我无法让我的 html 按钮成功调用我的 submit() 函数。当我按下提交时，脚本标签中的所有代码都会执行，除了我的提交功能。我尝试重新排序我的脚本代码，但没有帮助。

我的程序在不同的文档类型、ide 和浏览器中表现相同，所以我知道这不是环境问题。

    <body>
    <div>
        <form>
            Select your foods.<br>
            <input type="checkbox" name="foods" id="pine">Pine<br>
            <input type="checkbox" name="foods" id="tuna">Tuna<br>
            <input type="checkbox" name="foods" id="bread">Bread<br>
            <input type="checkbox" name="foods" id="apple">Apple<br>
            <input type="checkbox" name="foods" id="oats">Oats<br><br>
            <button type="button" onclick="submit()">Submit</button>
        </form>                
    </div>
    <script>

    var pine = document.getElementById("pine");
    var tuna = document.getElementById("tuna");
    var bread = document.getElementById("bread");
    var apple = document.getElementById("apple");
    var oats = document.getElementById("oats");

    var foods = [pine,tuna,bread,apple,oats];

    function submit()
    {

        var collection = "";
        for (i=0;i<foods.length;i++)
        {
            if (foods[i].checked)
            {
                collection += foods[i].id + " ";
            }
        }

        document.cookie = collection;
        alert(document.cookie);

    }


    </script>
</body>

非常感谢各位！

【问题讨论】：

标签： javascript function button call invoke

【解决方案1】：

submit() 是一个依赖于实现的保留字，不应用作函数名 (http://www.javascripter.net/faq/reserved.htm, http://www.w3schools.com/js/js_reserved.asp)。只需更改函数名称，它应该可以工作。

请查看plunkr

【讨论】：

【解决方案2】：

这是因为submit 是 JavaScript 中的保留字。使用另一个函数名称，例如submitItem()。另请注意，默认情况下，按钮可以提交表单，这似乎不是您的意图。我建议将它放在表单之外或阻止它的默认行为。

【讨论】：