使用onclick按鈕來執行腳本 - HTML/jquery/Javascript

Question

任何人都可以幫我把3段代碼放在一起嗎？我可以運行該腳本罰款和它的作品我只是不知道如何將這種對齊到的onclick按鈕事件

1) User clicks button. 
2) Script is executed and sends message to API 

在HTML中

<script src="jquery-git.js" type="text/javascript"> 
<script src='slackapi.js'></script> 

按鈕執行腳本

<fieldset> 
<button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Send Message</button> 
</fieldset> 

slackapi.js腳本

var url = 'https://hooks.slack.com/services/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' 
var text = 'This is a message' 
$.ajax({ 
    data: 'payload=' + JSON.stringify({ 
     "text": text 
    }), 
    dataType: 'json', 
    processData: false, 
    type: 'POST', 
    url: url 
}); 

Answer 1

第一種選擇： -

你需要用slackapi.js代碼中$(document).ready(function(){..});和按鈕點擊如下圖所示： -

slackapi.js： -

$(document).ready(function(){ 
    $('#contact-submit').on('click',function(e){ 
     e.preventDefault(); 
     var url = 'https://hooks.slack.com/services/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' 
     var text = 'This is a message' 
     $.ajax({ 
      data: 'payload=' + JSON.stringify({ 
       "text": text 
      }), 
      dataType: 'json', 
      processData: false, 
      type: 'POST', 
      url: url 
     }); 
    }); 
}); 

第二個選項是： -

包裝你slackapi.js代碼的函數裏面並調用按鈕功能點擊如下圖所示： -

function runIt(){ 
    var url = 'https://hooks.slack.com/services/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' 
    var text = 'This is a message' 
    $.ajax({ 
     data: 'payload=' + JSON.stringify({ 
      "text": text 
     }), 
     dataType: 'json', 
     processData: false, 
     type: 'POST', 
     url: url 
    }); 

} 

，並調用它像當前頁面如下： -

$(document).ready(function(){ 
    $('#contact-submit').on('click',function(e){ 
     e.preventDefault(); 
     runIt(); 
    }); 
}); 

注意： - 確定在b其他情況下，jQuery庫包含在您的代碼中包含此腳本之前。

Answer 2

這應該在你的slackapi.js文件工作：

!function(){ 
    function someFunction(){ 
     var url = 'https://hooks.slack.com/services/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' 
     var text = 'This is a message' 
     $.ajax({ 
     data: 'payload=' + JSON.stringify({ 
      "text": text 
     }), 
     dataType: 'json', 
     processData: false, 
     type: 'POST', 
     url: url 
     }); 
    } 
    $('body').on('click', '#contact-submit', someFunction); 
}();