Javascript 无法从onclick事件调用JS函数

我试图从两个不同按钮的

onclick

事件调用JavaScript函数。我到处寻找类似的问题，但没有找到解决办法。当我点击任何一个按钮时，我都会得到错误信息

错误：“RemoveCode”未定义

我做错了什么

<script type="text/javascript">
    $(document).ready(function ()
    {
        function RemoveCode(codeType)
        {
            var selectedProjectsField = $("#SelectedProjects");
            var selectedProjectCodesField = $("#SelectedProjectCodes");
            var selectedTasksField = $("#SelectedTasks");
            var selectedTaskCodesField = $("#SelectedTaskCodes");
            var selectedOption;

            if (codeType = "Project")
            {
                selectedOption = $("#SelectedProjects :selected").index();
            }
            else
            {
                selectedOption = $("#SelectedTasks :selected").index();
            }

            alert(selectedOption);
        }

    });
</script>

$（文档）.ready（函数（）
{
函数RemoveCode（代码类型）
{
var SelectedProjects字段=$（“#SelectedProjects”）；
var SelectedProjectCodes字段=$（“#SelectedProjectCodes”）；
var selectedTasksField=$（“#SelectedTasks”）；
var selectedtaskcode字段=$（“#selectedtaskcode”）；
var选择期权；
if（codeType=“项目”）
{
selectedOption=$（“#SelectedProjects:selected”）.index（）；
}
其他的
{
selectedOption=$（“#SelectedTasks:selected”）.index（）；
}
警报（选择选项）；
}
});

我的按钮代码：

        <li>
            <label for="SelectedProjects">Selected Projects:</label>
            <select size="1" id="SelectedProjects" name="SelectedProjects" multiple></select> <button class="removeButton" onclick="RemoveCode('Project')" type="button">-</button>
        </li>

        <li>
            <label for="SelectedTasks">Selected Tasks:</label>
            <select size="1" multiple id="SelectedTasks" name="SelectedTasks"></select> <button class="removeButton" onclick="RemoveCode('Task')" type="button">-</button>
        </li>

选定项目：
-


选定任务：
-

---

我应该注意到，在同一页面上，页面上的其他元素有多个

change

事件，它们都可以正常工作。正是这个“onclick”失败了。

您正在一个函数中定义您的

ready（）

方法。 然后，您可以使用两种方法。首先，您不能使用

$（document）.ready（）

，因为调用

ready（）

的按钮在文档准备就绪之前无法单击。 其次，您可以在

$（document.ready（）

中绑定

onclick

---

您正在闭包中定义RemoveCode方法。因此，此函数在HTML元素的onclick回调中不可用。 您可以将代码更新到此版本，它应该可以工作：

<script type="text/javascript">

function RemoveCode(codeType)
{
    var selectedProjectsField = $("#SelectedProjects");
    var selectedProjectCodesField = $("#SelectedProjectCodes");
    var selectedTasksField = $("#SelectedTasks");
    var selectedTaskCodesField = $("#SelectedTaskCodes");
    var selectedOption;

    if (codeType = "Project")
    {
        selectedOption = $("#SelectedProjects :selected").index();
    }
    else
    {
        selectedOption = $("#SelectedTasks :selected").index();
    }

    alert(selectedOption);
}

</script>

函数RemoveCode（代码类型）
{
var SelectedProjects字段=$（“#SelectedProjects”）；
var SelectedProjectCodes字段=$（“#SelectedProjectCodes”）；
var selectedTasksField=$（“#SelectedTasks”）；
var selectedtaskcode字段=$（“#selectedtaskcode”）；
var选择期权；
if（codeType=“项目”）
{
selectedOption=$（“#SelectedProjects:selected”）.index（）；
}
其他的
{
selectedOption=$（“#SelectedTasks:selected”）.index（）；
}
警报（选择选项）；
}

将您的函数放在

document.ready（）之外。

$（document）.ready（函数（）//此处不需要此函数
{   });
函数RemoveCode（codeType）//在浏览器上加载页面时自动加载。
{
var SelectedProjects字段=$（“#SelectedProjects”）；
var SelectedProjectCodes字段=$（“#SelectedProjectCodes”）；
var selectedTasksField=$（“#SelectedTasks”）；
var selectedtaskcode字段=$（“#selectedtaskcode”）；
var选择期权；
if（codeType=“项目”）
{
selectedOption=$（“#SelectedProjects:selected”）.index（）；
}
其他的
{
selectedOption=$（“#SelectedTasks:selected”）.index（）；
}
警报（选择选项）；
}

首先请注意，在

if

条件下，您需要使用

=

（而不是

=

）来比较值

要解决你的问题，你有两个选择。首先，您可以简单地将

RemoveCode

函数移出document.ready处理程序的范围，以便可以从

onclick

属性访问它：

<script type="text/javascript">
    function RemoveCode(codeType)
    {
        // your code...
    }

    $(document).ready(function ()
    {
        // your code...
    });
</script>

选定项目：
-


选定任务：
-

将其移出

ready（）

回调，使其成为全局的。最好使用jQuery的

on（）

绑定事件<代码>$（'.removeButton'）。单击（函数（）{…}）将你的函数从$（document）.ready（）中取出，然后你的函数就可以访问了。在标记中使用onclick不是一种好的形式。按照其他人的建议，使用jQuery绑定事件。谢谢大家，我不知道它处于

ready（）

事件中会导致问题。我按照建议将其移出，现在可以使用了。或者将其保留在闭包中，并在其中绑定click事件。添加事件处理程序比使用onclick有什么好处？好处是它遵循了该模式。在本例中，这意味着您的HTML与JS完全分离（JS应该与CSS完全分离）。在实践中，您应该能够对守则的任何一部分进行修改，而无需修改任何其他部分。例如，如果我在我的JS代码中更改了一个函数的名称，它应该不会影响HTML。好的一点是，我以后必须将代码移到JS文件中，我想我会花时间进行清理和SoC。使用事件处理程序也更整洁，其他程序员也更容易维护。当您急于修复某个内容时，很容易丢失onclick属性，但如果所有内容都在脚本块中，则更明显。通常，您会有许多元素需要调用相同的代码，通过事件绑定，您可以只绑定它们一次，从而避免大量代码重复。

<script type="text/javascript">
    $(document).ready(function () // No Need of this Function here
    {   });
        function RemoveCode(codeType) // Automatically load when Your page is getting loaded on Browser.
        {
            var selectedProjectsField = $("#SelectedProjects");
            var selectedProjectCodesField = $("#SelectedProjectCodes");
            var selectedTasksField = $("#SelectedTasks");
            var selectedTaskCodesField = $("#SelectedTaskCodes");
            var selectedOption;

            if (codeType = "Project")
            {
                selectedOption = $("#SelectedProjects :selected").index();
            }
            else
            {
                selectedOption = $("#SelectedTasks :selected").index();
            }

            alert(selectedOption);
        }


</script>

<script type="text/javascript">
    function RemoveCode(codeType)
    {
        // your code...
    }

    $(document).ready(function ()
    {
        // your code...
    });
</script>