編寫 HTML 按鈕以鏈接到 JavaScript 文件

Question

我試圖讓一個用 HTML 編寫的按鈕在點擊時鏈接到一個單獨的 JavaScript 文件，有問題的按鈕編碼如下

<input type="button" id="clickme" value="Submit" />

我正在使用 Brackets 代碼編輯器，我想鏈接的 js 文件與我的 HTML 代碼在同一個項目中，如果這有幫助的話

提前致謝

Answer 1

使用<script>元素將腳本加載到頁面中。

將您的代碼保存在一個函數中，而不是簡單地在加載腳本的情況下運行整個事情。

在 DOM 中找到按鈕（例如使用getElementById ）並使用addEventListener將該函數綁定為單擊事件偵聽器。

Answer 2

如果你的意思是鏈接，我會使用一個<a> （錨點）標簽，它有一個屬性href作為引用。 因此，您可以使用：

<a href="http://example.com/public/js/script.js">Link to JS</a>

或者你的意思是onclick屬性是： <input type="button" id="clickme" onclick="myfunction()" value="Submit" />

然而，正如所指出的，這也不是最佳實踐。

jQuery.click() 與 onClick

提供了一些選項並強化了onclick不是觸發 Javascript 函數的最佳方式的想法。

Answer 3

只需通過以下方式將您的 js 腳本鏈接到頁面：

<script src="js/button.js"></script>

然后只需通過類或 ID 在該腳本中調用操作。

 <button id="btnShow"><h1 class="jumbotron-heading">Expand</h1></button>
 <p class="p1">Test</p1>

那是一個 jQuery 而不是 js，但無論如何都是我認為的一個很好的例子

$('#btnShow').click(function(){
 $('.p1').show();
});