Question

I have a page so far with:

<div id="x1">Text paragraph 1<link here></div>
<div id="x2">Text paragraph 2<link here></div>
<div id="x3">Text paragraph 3<link here></div>

Where link here is like

<a href="google.com">google</a>

What I am trying to do is add a link to the bottom of each paragraph of text so that when it is clicked it displays an alert with the div id of that text block.

So for example, if someone clicks on the link at the bottom of text paragraph 2, then they will get an alert saying “x2”.

So far, I have only been able to think of a way involving an onclick event for each link in each div. But with 100 paragraphs this could become quite a lot and is messy code.

like

$('#x1').onclick(function(){
alert('x1');
});

How can I do this better?

The page is generated with php so I could put the div id’s anywhere in that text block area (even make a new div around the link if required)…

EDIT – Many good answers, I don’t know which to pick as best. I actually ended up using Loongawas for my purpose as its easy to make for my beginner level in php.

<div id='a1'>This text <a href="" onclick=tomato(1)>test</a>
</div>
<div id='a2'>This text <a href="" onclick=tomato(2)>test</a>
</div>
<div id='a3'>This text <a href="" onclick=tomato(3)>test</a>
</div>

and

function tomato(test){
alert(test);
};

Some of the others are incredibly interesting as they use higher functions. I’m going to spend the rest of the day looking into them. Thanks to all.

Answer 1

You could make a javascript function that takes a variable and then pass the paragraph number to the function. If the paragraph was number two you could call

myfunction(2);

or is the number not the problem?