Question: I have some code I modified and they have inline scripts in HTML. 

For an example, in my documents there are few buttons like this. 

```html
<button class="btn-primary" onclick="selectAll()">All Students</button>
```

How to avoid this inline styling in the best way possible? 

Additional Info : I'm using query files. Any input would be appreciated.

Answer: 
Use the modern, standards-based **[`element.addEventListener()`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener)** method to configure your event handlers.

```js
// Get your element reference
var btn = document.querySelector("button.btn-primary");

// Configure an event handler.
// NOTE: You don't invoke the function here so no () after the function name
btn.addEventListener("click", showAll);

// This is the callback function
function showAll(){
  console.log("You clicked the button!");
}
```

```html
<button class="btn-primary">All Students</button>
```

Or, in JQuery, use the **[`element.on()`](http://api.jquery.com/on/)** method:

```js
// Get your element reference
var $btn = $("button.btn-primary");

// Configure an event handler.
// NOTE: You don't invoke the function here so no () after the function name
$btn.on("click", showAll);

// This is the callback function
function showAll(){
  console.log("You clicked the button!");
}
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn-primary">All Students</button>
```
you can set id for button like 

```
<button class="btn-primary" id="btn">All Students</button>

```

then create separated js file "script.js" and write in it this 

```
window.onload = function(){
var btn = docuemtn.getElementById('btn');

btn.addEventListener('click',function(e){
   selectAll();
});
}

```

to link js file to html file write at the bottom of html file this 

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

```