無法從onclick事件調用JS函數

我想從兩個不同按鈕的onclick事件調用JavaScript函數。我已經挖掘並搜索了問題，但還沒有找到解決方案。當我點擊任一按鈕時，出現錯誤無法從onclick事件調用JS函數

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。

來源

2016-04-28 Matthew

+10

將其移出'就緒（）'回調，使其全球。更好地使用jQuery的'on（）'來綁定事件。 '（'。removeButton'）。click（function（）{...}）;' – Tushar

將你的函數放在$（document）.ready（）之後，你的函數就可以到達了。 –

在標籤中使用onclick是不好的形式。按照其他人的建議，使用jQuery綁定事件。 – user1751825

首先注意，一邊在if條件你需要使用==（不= ）來比較值。

要解決您的問題，您有兩種選擇。首先，你可以簡單地移動RemoveCode功能出的document.ready處理程序的範圍，以便它可以從onclick屬性來訪問：

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

來源

2016-04-28 13:38:23

添加事件處理函數比使用onclick有什麼優勢？ – Matthew

其優點是它遵循[分離關注]（https://en.wikipedia.org/wiki/Separation_of_concerns）模式。在這種情況下，這意味着你的HTML完全獨立於JS（反過來應該完全獨立於CSS）。在實踐中，您應該能夠對代碼中的任何一部分進行修改，而無需修改任何其他部分。例如，如果我在我的JS代碼中更改函數的名稱，它不應該影響HTML。 –

好點，我不得不在稍後將代碼移動到JS文件，我想我會花時間做清理和SoC。 – Matthew

您正在定義您的ready()方法，其內部爲closure。然後您可以使用兩種方法。首先，無法使用$(document).ready()作爲調用ready()無法單擊的按鈕，直到文檔準備就緒。二是你可以綁定onclick裏面的$(document).ready()。

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

來源

2016-04-28 13:26:56

或者將它保留在閉包中，並在那裏綁定點擊事件。 – user1751825

非常好的一點，修改我的答案以反映這一點。 –

您正在定義閉包內的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>

來源

2016-04-28 13:28:52 babgyy

把你的功能出來的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>

來源

2016-04-28 13:29:11

無法從onclick事件調用JS函數

回答

相關問題