JavaScript Unable to call JS function from onclick event unable to call function in ajax success,unable to call

I am trying to call a JavaScript function from the onclick event of two different buttons. I have dug around and searched for like problems but have not found a solutions. When I click either button I get the error

Error: 'RemoveCode' is undefined'

What am I doing wrong?

<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>

Code for my buttons:

        <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>

I should note that on the same page there are multiple change events for the other elements on the page and they all work fine. It is just this `onclickP that is failing.

Answer:1

Firstly note that in your if condition you need to use == (not =) to compare values.

To solve your issue you have two options. Firstly you could simply move the RemoveCode function out of the scope of the document.ready handler so that it can be accessed from the onclick attribute:

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

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

Alternatively, it would be much better practice to add your event handlers using unobtrusive Javascript. As you're using jQuery, here's how you can do that:

$(function() {
  $('button').click(function() {
    var $selectedProjectsField = $("#SelectedProjects");
    var $selectedProjectCodesField = $("#SelectedProjectCodes");
    var $selectedTasksField = $("#SelectedTasks");
    var $selectedTaskCodesField = $("#SelectedTaskCodes");
    var selectedOption;

    if ($(this).data('codetype') == "Project") {
      selectedOption = $selectedProjectsField.find(':selected').index();
    } else {
      selectedOption = $selectedTasksField.find(':selected').index();
    }

    alert(selectedOption);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <label for="SelectedProjects">Selected Projects:</label>
    <select size="1" id="SelectedProjects" name="SelectedProjects" multiple></select>
    <button class="removeButton" data-codetype="Project" type="button">-</button>
  </li>

  <li>
    <label for="SelectedTasks">Selected Tasks:</label>
    <select size="1" multiple id="SelectedTasks" name="SelectedTasks"></select>
    <button class="removeButton" data-codetype="Task" type="button">-</button>
  </li>
</ul>
Answer:2

You are defining your RemoveCode method inside a closure. This function will thus not be available as onclick callbacks of your HTML elements. You can just update your code to this and it should work:

<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>
Answer:3

put your function out side of document.ready()

<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>
Answer:4

So I'm trying to get the width of the element using jQuery. alert($("#theList li:eq(0)").offsetWidth); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></...

So I'm trying to get the width of the element using jQuery. alert($("#theList li:eq(0)").offsetWidth); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></...

I have a situation where I have 3 components; <View> <Content> and <Footer>. <View> is parent of <Content> and <Footer>. Now there is a button in <Footer> ...

I have a situation where I have 3 components; <View> <Content> and <Footer>. <View> is parent of <Content> and <Footer>. Now there is a button in <Footer> ...

  1. reactjs accessing child state
  2. react accessing refs

I build my page with angularJS. When I test it every thing works well, but sometimes the page flickers. Here is a sample when I click M1 > Sub-Menu-Item, I see the page flicker. Can anybody help ...

I build my page with angularJS. When I test it every thing works well, but sometimes the page flickers. Here is a sample when I click M1 > Sub-Menu-Item, I see the page flicker. Can anybody help ...

thank you for taking your time to answer my question. I really can't find a good example on how to use raycaster in three JS in the version r74. It seems to be a lot of changes between the versions ...

thank you for taking your time to answer my question. I really can't find a good example on how to use raycaster in three JS in the version r74. It seems to be a lot of changes between the versions ...