JS関数をonclickイベントから呼び出すことができません

Question

2つの異なるボタンのonclickイベントからJavaScript関数を呼び出そうとしています。私は周りを掘り下げて問題のように検索したが解決策を見いださなかった。いずれかのボタンをクリックするとエラーが表示されます

Error: 'RemoveCode' is undefined'

私は間違っていますか？私のボタンの

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

コード：

 <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イベントがある同じページにあることに注意すべきです。この `onclickPは失敗しているだけです。

Answer 1

の側はまず、あなたのif状態であなたが==（ない=を使用する必要があることに注意して、あなたの関数を出します）を使用して値を比較します。

問題を解決するには2つの方法があります。それはonclick属性からアクセスできるように、まず、あなたは単にdocument.readyハンドラの範囲外RemoveCode機能を移動できます。

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

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

代わりに、使用してイベントハンドラを追加するためのより良い練習になります控えめなJavascriptあなたはjQueryのを使用しているとして、ここではあなたがそれを行うことができます方法は次のとおりです。 `レディ（）`コールバックのうち

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

ready()メソッドはclosureの中に定義しています。 次に、2つの方法を使用できます。最初に、ready()というボタンをクリックすると、ドキュメントが準備完了になるまで、$(document).ready()を使用できません。 第2に、$(document).ready()の中にonclickをバインドすることができます。

$(document).ready(function() { 
    $('#firstItem').click(function() { Ready('Project'); }); 
    .... 
}); 

Answer 3

クロージャ内で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> 

Answer 4

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