'onclick' Storing Value Not Working

Question

so I have this <a> tag:

   <a href="/book-testdrive" class="addtocart" value="YX57WDL" title="Book Test Drive">
     <i class="glyphicon glyphicon-road"></i>
     <span>&nbsp;Book Test Drive</span>
   </a>

As you can see it is given a value of value="YX57WDL" now what I would like to do is capture that value when the a tag is clicked and placed into a variable.

There are many <a> tags on my page with many different values that are created dynamically. If a user presses another a tag I'd like it storing in the same variable but replace the value with that of the unique <a> tag value.

Also the variable needs to be stored site wide, I guess the solution to this would be Web Storage API.

So far I've tried using this Javascript:

var links = document.querySelectorAll('.addtocart ');

links.onclick = function(){
  localstorage['storedValue'] = this.value ;
}

However when I console.log() the links variable it contains nothing.

Any idea why this might be happening?

Thanks

score 1 · Answer 1 · answered Aug 11 '15 at 20:24

1

The problem is that document.querySelectorAll returns a (non-live) node list. This means that it is basically an array, so you could do a loop for each one instead:

for (var i = 0; i < links.length; i++) {
    links[i].onclick = function(){
        localStorage['storedValue'] = this.value ;
    }
}

Also note that I changed localstorage to localStorage because it's case sensitive.

answered Aug 11 '15 at 20:24

Stryner

7,128
2
15
18

Hi I have tried adding this to the following page [Here](http://drivencarsales.co.uk/used-cars.html). If you try pressing the 'book test drive' A tag you will notice that the value isn't stored. I've added the JS to the end of the porto.js that you can see in the browser source file. Any idea why this isn't working? – Uncle Kracker Aug 11 '15 at 20:49

score 0 · Accepted Answer · edited May 23 '17 at 12:06

0

You will need to wait until the DOM is loaded, or else the call to document.querySelectorAll() will not find anything if the element you are looking for has not been added to the DOM yet.

I see you added jquery as a tag, so I assume you are using jquery. If that is the case, you can wrap your code with the jquery function to wait for the DOM to be ready, like this:

$(document).ready(function() {
    var links = document.querySelectorAll('.addtocart ');

    links.onclick = function(){
        localStorage['storedValue'] = this.value ;
    }
});

Also if you are using jquery, you could be using its on function to make this a lot simpler.

$(document).ready(function() {
    $('.addtocart').on('click', function() {
        localStorage['storedValue'] = this.value;
    }
});

If you are not using jquery, see this question about how to wait for the DOM to load without the jquery $(document).ready() function.

edited May 23 '17 at 12:06

Community

1
1

answered Aug 11 '15 at 20:24

Andrew Mairose

9,309
9
49
92

Edited to change `localstorage` to `localStorage`, as mentioned in the answer posted by @Stryner. – Andrew Mairose Aug 11 '15 at 20:29
Hi seem to be getting a syntax error for both of these code examples, it's a little beyond my depth of knowledge to understand what is going wrong? I am using jQuery. – Uncle Kracker Aug 11 '15 at 21:41
Oops, left off the `);` at the end. Updated the answer to fix it. – Andrew Mairose Aug 12 '15 at 13:06

score 0 · Answer 3 · answered Aug 11 '15 at 20:51

0

Try ".getAttribute('value')" instead of ".value":

var links = document.querySelector('a.addtocart');

links.onclick = function(){
    localStorage['storedValue'] = links.getAttribute('value');
}

answered Aug 11 '15 at 20:51

Thiago Machado

31
4

score 0 · Answer 4 · answered Aug 11 '15 at 22:44

Since you are using jQuery, you can do something like this:

$("body").on("click", ".addtocart", function(e) {
    localstorage['storedValue'] = $(this).val();
});

You surely wonder why did your attempt fail. In fact, you were not too far from the solution, but you probably ran your script before your links were created. With the .on() function of jQuery you have a listener to the current and future elements matching the selector (which is ".addtocart").

'onclick' Storing Value Not Working

4 Answers4