-1

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. 

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

Berglund
  • 636
  • 2
  • 7
  • 20

2 Answers2

5

Use the modern, standards-based element.addEventListener() method to configure your event handlers.

// 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!");
}
<button class="btn-primary">All Students</button>

Or, in JQuery, use the element.on() method:

// 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!");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn-primary">All Students</button>
Scott Marcus
  • 64,069
  • 6
  • 49
  • 71
  • Thanks a lot for this. This minimized my code a lot. – Berglund Apr 27 '18 at 16:27
  • Hi Scott Marcus, Sorry to bother you again. Could you please tell me how can I use this same code of yours for dropdown menu button and it's items. I can start a new question. – Berglund Apr 27 '18 at 18:13
  • 1
    @RashmiNimesha It's no different at all. Just use `.addEventListener()` or `.on()` (depending on whether you want to do it with vanilla JavaScript or JQuery) with any element you need to and use `"click"` when you want to handle clicks, `"change"` when you want to handle value changes, or any other event that you need to. – Scott Marcus Apr 27 '18 at 18:19
  • I tried to do this using your same code but didn't work for menu items. If possible could you please answer my new question, https://stackoverflow.com/questions/50067652/turn-inline-onclick-to-click-jquery/50067772#50067772. – Berglund Apr 27 '18 at 18:22
  • 1
    @RashmiNimesha That's not the correct way to make a custom drop down list. All that is is a group of links, but you're not using them as links, so you shouldn't be using `a` at all. You should make an unordered list (`
    `) and set up `click` event handlers with `.addEventListener()` for each of the `li` elements.     – Scott Marcus Apr 27 '18 at 18:29
  • Thanks. I'll try it again using these. I just took that code from one of bootstrap example. – Berglund Apr 27 '18 at 18:31
0

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>
Ahmed Kesha
  • 810
  • 5
  • 11
  • 1
    Welcome to SO, and thanks for trying to help! (I did NOT downvote). This approach is more complex than it needs to be - no need for an ID, necessarily, and no need for an external JS file. – random_user_name Apr 27 '18 at 15:40
  • Also, you are using an event property (`onload`) while trying to teach `.addEventListner()` and you misspelled `document`. – Scott Marcus Apr 27 '18 at 15:42
  • 1
    it is the best practice to separate logic layer from presentation layer. and I set id for button because it may be there are other buttons with this class so that you should identify element with id . window.onload to ensure dom tree is loaded and button become true – Ahmed Kesha Apr 27 '18 at 15:42
  • 1
    Event properties like `.onload`, etc. (while valid) are not recommended. Use `window.addEventListener("DOMContentloaded")`, especially since your are trying to show `.addEventListener()` in the first place. Or, better yet, skip that particular event binding altogether and just place your `script` just prior to the closing `body` tag. Also, the use of `id` as your first choice to identify an element will eventually come back to haunt you because your HTML will be loaded up with extra attributes and your CSS will become difficult to maintain as `id` based selectors are hard to override. – Scott Marcus Apr 27 '18 at 15:48
  • Also, placing scripts into their own ` – Scott Marcus Apr 27 '18 at 15:51
  • Hi Ahmed, Thanks for helping. Really appreciate this. – Berglund Apr 27 '18 at 16:28