'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

Answer 1

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.