button onclick bind event

Question

In HTML, I have a button list. If user clicks a button,
doCommand function will be called. The code is following,

<ul>
<li class="button1" onclick="doCommand('bold');" id="bold-button" title="bold">B</li>
<li class="button2" onclick="doCommand('bold');" id="italic-button" title="bold">I</li>
<li class="button3" onclick="doCommand('bold');" id="underline-button" title="bold">U</li>
<li class="button4" onclick="doCommand('bold');" id="strikethrough-button" title="bold">S</li>
</ul>

This is plain expression, normal web programmer will code like that. But, I want to hide onclick event and its function for security reason. So the HTML code will be like this,

<ul>
<li class="button1" id="bold-button" title="bold">B</li>
<li class="button2" id="italic-button" title="bold">I</li>
<li class="button3" id="underline-button" title="bold">U</li>
<li class="button4" id="strikethrough-button" title="bold">S</li>
</ul>

Is there any efficient way to do this? Hiding onclick property but do the same work. I am using jQuery.

Possible duplicate of [Javascript click event listener on class](http://stackoverflow.com/questions/19655189/javascript-click-event-listener-on-class) — Loktar, May 02 '16 at 19:39

stecb · Accepted Answer · 2011-02-08T13:53:24.417

5

if you set the same class for the btns, you could easily do:

markup:

<ul>
<li class="button1 clickable" id="bold-button" title="bold">B</li>
<li class="button2 clickable" id="italic-button" title="bold">I</li>
<li class="button3 clickable" id="underline-button" title="bold">U</li>
<li class="button4 clickable" id="strikethrough-button" title="bold">S</li>
</ul>

js:

$('.clickable').click(function(){/* doCommand('bold') or whatever */})

Edit: if you want on click to directly transform the text to bold, you could use the this (that refers to the element you clicked, and you need to wrap it inside jQuery $) keyword inside the function i.e.

$('.clickable').click(function(){$(this).css('font-weight','bold')})

edited Feb 08 '11 at 13:53

answered Feb 08 '11 at 13:34

stecb

14,478
2
50
68

but, how can I know which button was clicked? – Jinbom Heo Feb 08 '11 at 13:38
inside the function, the "this" refers to the li 'button' you clicked.. if you alert this.id it will show you the right id for each button.. – stecb Feb 08 '11 at 13:41
You're welcome. I edited my example with an example of *this* ;) – stecb Feb 08 '11 at 13:54

score 5 · Answer 2 · answered Feb 08 '11 at 13:34

5

The class should be the same at all buttons, like this:

<li class="button button1"...
<li class="button button2"...

Then, you can do like this in javascript.

$("li.button").click(function() {
  doCommand('bold');
});

answered Feb 08 '11 at 13:34

Jan Sverre

4,617
1
22
28

Maybe we can reuse the title attribute? doCommand(this.attr('title')); – erickb Feb 08 '11 at 13:38

score 2 · Answer 3 · answered May 02 '16 at 19:29

Without changing your markup and using vanilla JS you can do it the following way.

const list = document.querySelector('ul');

list.addEventListener('click', e => {
  if (e.target.classList.contains('button1')) {
    console.log('bold');
  };
  if (e.target.classList.contains('button2')) {
    console.log('italics');
  };
  if (e.target.classList.contains('button3')) {
    console.log('underline');
  };
  if (e.target.classList.contains('button4')) {
    console.log('strikethrough');
  };

})

<ul>
  <li class="button1" id="bold-button" title="bold">B</li>
  <li class="button2" id="italic-button" title="bold">I</li>
  <li class="button3" id="underline-button" title="bold">U</li>
  <li class="button4" id="strikethrough-button" title="bold">S</li>
</ul>

I assign the event to the parent list, and check the class of the target allowing to do whatever action needed.

score 1 · Answer 4 · answered Feb 08 '11 at 13:35

1

You can use jquery's document ready event to wire up the events:

$(function()
{
    $("#bold-button").click(function(){doCommand('bold');});
}
);

answered Feb 08 '11 at 13:35

Aliostad

80,612
21
160
208

button onclick bind event

4 Answers4