CODEWITHSUNDEEP
javascriptjqueryonclick
Mordecai
Mordecai

Reputation: 1494

How to add multiple onclick events to all elements in page

I've a HTML code like this.

<a onclick="prompt('Complete','Lorem');">Lorem</a>
<a onclick="prompt('Complete','ipsum');">ipsum</a>
<a onclick="prompt('Complete','dolor');">dolor</a>
<a onclick="prompt('Complete','sit');">sit</a>
<a onclick="prompt('Complete','amet');">amet</a>
...

I want to minify HTML code, like this: <a>Lorem</a><a>ipsum</a>
How can I add onclick prompt event to all clickable elements in a page? as in the above code. Is it possible?

Upvotes: 2

Views: 742

Answers (3)

Suba S
Suba S

Reputation: 326

Using JavaScript, you have to attach the click handler to each item with a loop.

function userPrompt(event){
  prompt("Complete " + event.target.innerText);
}
document.querySelectorAll('a').forEach(item => item.addEventListener('click', userPrompt));
  
a {
  cursor: pointer
}
<a>Lorem</a>
<a>ipsum</a>
<a>dolor</a>
<a>sit</a>
<a>amet</a>

JQuery has a simple way of achieving this.

function userPrompt(event){
  prompt("Complete " + event.target.innerText);
}

$('a').on('click', userPrompt);
a {
  cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a>Lorem</a>
<a>ipsum</a>
<a>dolor</a>
<a>sit</a>
<a>amet</a>

Upvotes: 3

fizzydrinks
fizzydrinks

Reputation: 634

// select all <a> tags
document.querySelectorAll('a')
  // loop over them
  .forEach(a =>
    // append the event by calling addEventListener
    a.addEventListener('click', () => window.prompt('Complete', 'Lorem')))

The forEach can take a second argument, the index, so you can define the message on each prompt according to the value of an array.

const promptValue = [
  'Lorem',
  'ipsum',
  'dolor',
  'sit',
  'amet'
]

document.querySelectorAll('a').forEach((a, i) =>
  a.addEventListener('click', () => window.prompt('Complete', promptValue[i])))

Edit: I should probably add that this may become hard to maintain if the list changes order in the future, so it's probably better to keep some reference to the prompt value in the HTML, even if it gets verbose. Nevertheless, it's bad to keep scripts in the HTML, so a data attribute might be a better approach.

HTML:

<a data-prompt="Lorem">Lorem</a>
<a data-prompt="ipsum">ipsum</a>
<a data-prompt="dolor">dolor</a>
<a data-prompt="sit">sit</a>
<a data-prompt="amet">amet</a>

JS:

document.querySelectorAll('a').forEach(a =>
  a.addEventListener('click', () => window.prompt('Complete', a.dataset.prompt)))

Upvotes: 0

Keith
Keith

Reputation: 24181

Like pointed out, addEventListener is your friend here.

One major advantange of addEventListener compared to say a normal onClick, is that any elements added to the DOM later will also be taken into account, and is also possible to add multiple event listeners to the same element.

Below is a simple example. I basically add the eventListener to the body, filter out any elements that are not A links, and then show a prompt for the user to change the innerText of this element.

document.body.addEventListener("click", (e) => {
  //lets limit to just A links
  if (e.target.tagName !== "A") return;
  const ret = prompt("Confirm", e.target.innerText);
  if (ret !== null) {
    e.target.innerText = ret;
  }
});
a {
  text-decoration: underline;
  cursor: pointer;
}
<div>Click a link to change the innerText</div>

<a>Lorem</a>
<a>ipsum</a>
<a>dolor</a>
<a>sit</a>
<a>amet</a>

Upvotes: 1

Related Questions