How to set onclick functions to multiple elements?

Question

I am trying to use javascript to set the onclick property for my links. When the user clicks the link, I want to set a cookie.

Here is the code to set the cookie:

function setCookie(cookieName, cookieValue, cookiePath, cookieExpires){
    cookieValue = escape(cookieValue);
    if (cookieExpires == "") {
      var nowDate = new Date();
      nowDate.setMonth(nowDate.getMonth() + 6);
      cookieExpires = nowDate.toGMTString();
} if (cookiePath != "") {
  cookiePath = ";Path=" + cookiePath;
}
document.cookie = cookieName + "=" + cookieValue + 
  ";expires=" + cookieExpires + cookiePath;
}

function getCookieValue(cookieName)
{
var cookieValue = document.cookie;
var cookieStartsAt = cookieValue.indexOf(" " + cookieName + "=");
if (cookieStartsAt == -1)
{
  cookieStartsAt = cookieValue.indexOf(cookieName + "=");
}
if (cookieStartsAt == -1)
{
  cookieValue = null;
}
else
{
  cookieStartsAt = cookieValue.indexOf("=", cookieStartsAt) + 1;
  var cookieEndsAt = cookieValue.indexOf(";", cookieStartsAt);
  if (cookieEndsAt == -1)
  {
     cookieEndsAt = cookieValue.length;
  }
  cookieValue = unescape(cookieValue.substring(cookieStartsAt,
     cookieEndsAt));
}
return cookieValue;
}

And now here is the code to set the onclick function:

var elements = document.getElementsByTagName('a');
   for(var i = 0, len = elements.length; i < len; i++) {
        elements[i].onclick = setCookie("workshop", elements[i].getAttribute("name"), "", "");
   }

I would like for the cookie value to be set as the name of the link. For example, if I have a link <a href="#" name="test2"> , I want the cookie to be set to "test2".

However, with this code, the cookie value keeps coming out to be the name attribute of the last < a > tag on the page (the last link). I want each link to have their own onclick function; not all of them to set the cookie to the same value. This way, once the user reaches the next screen, I will know which link they clicked to get there.

ANY HELP IS GREATLY APPRECIATED! THANKS AHEAD!

Please [read this post](http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example). — Teemu, Dec 22 '14 at 19:46
you didn't talk about jquery but using a class attribute and a selector would be a little bit more simple: each `` has the class `cookielink` you could do: `$('.cookielink').click(function(){ setCookie("workshop", $(this).attr('name'), "", ""); });` — Hemadeus, Dec 22 '14 at 19:48
I'm not very familiar with jquery @Hemadeus. Would that code simply take the place of my variable declaration and for-loop? — Chelly S, Dec 22 '14 at 19:57
@ChellyS well what it means is, each object with the class `cookielink` set the click event ( the one pass in parameter). in this case `$(this)` represent the `` . in short, it replace the loop. and you need to add the class `cookielink` to each control you want clickable. — Hemadeus, Dec 22 '14 at 20:04
@ChellyS Just study the accepted answer in the linked post carefully. You can find a lot of similarities to your code, and that small, but important difference. Learning to use closures properly will really help you a lot with the future tasks. — Teemu, Dec 22 '14 at 20:04

score 1 · Accepted Answer · answered Dec 22 '14 at 19:50

1

Use the addEventListener() function instead of an onclick event handler. Something like this should do what you want:

var elements = document.getElementsByTagName('a');
for (var i = 0, len = elements.length; i < len; i++) {
  elements[i].addEventListener("click", function() {
    setCookie("workshop", this.getAttribute("name"), "", "");
  });
}

answered Dec 22 '14 at 19:50

Ian Hazzard

7,661
7
34
60

**Perfect!** This is exactly what I was looking for! Thank you so much. I'll have to look into what an EventListener is since this is my first time using this method. Thanks again. – Chelly S Dec 22 '14 at 20:02

How to set onclick functions to multiple elements?

1 Answers1