编写 HTML 按钮以链接到 JavaScript 文件

Question

I'm trying to get a button written in HTML to link to a separate JavaScript file when it is clicked, the button in question is coded below

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

I am using the Brackets code editor, and the js file I want to be linked is in the same project as my HTML code, if that helps at all

thanks in advance

Answer 1

Load the script into the page with a <script> element.

Keep your code in a function instead of simply running the whole thing with the script is loaded.

Find the button in the DOM (eg with getElementById ) and bind the function as a click event listener with addEventListener ).

Answer 2

If you mean link, I would use an <a> (anchor) tag which has an attribute href which is the reference. Therefore, you could use:

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

Or perhaps you meant the onclick attribute which would be: <input type="button" id="clickme" onclick="myfunction()" value="Submit" />

However, as was pointed out, this is not best practice either.

jQuery.click() vs onClick

Provides some options and reinforces the idea that onclick is not the best way to trigger a Javascript function.

Answer 3

Just link your js script to a page by:

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

and then just call action in that scripts through the class or id.

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

That's a jQuery not js, but anyway a good example as I think

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