1

I saw this question and the first answer works great for the question asked... but what if I want to re-use the code over and over with different named elements?

Let me be specific.

Throughout my code (multiple pages on the site all calling same file.js) I want to have various internal "links" that right now I have written as:

<a onclick="testFunction('targetA');">test A</a>
<a onclick="testFunction('targetB');">test B</a>

And that calls the javascript accordingly. The advantage to this is that the same JS is used over and over without the need to write one for each "target". The disadvantage, besides the fact I have to type that mess above each time, is that according to that guy's answer it isn't the right way to do things.

So is there a "right way" where I can do something like this (realize this is pseudo-code):

<a id="test.A">test A</a>
<a id="test.B">test B</a>

And NOT have to explicitly define test.A vs test.B (vs C, D, E...) in the JS file? For example, the JS could be registered to "#test" but parse out the .X and act on that as a variable?

Or????

Community
  • 1
  • 1
bcsteeve
  • 973
  • 9
  • 22

2 Answers2

1

I dont know if this is wildly exaggerated, perhaps I am not understanding what you want - but what about 

var tests = document.querySelectorAll('[id^="test."]');
[].forEach.call(tests, function(a) {
   a.addEventListener('click', function(e) {
      alert(e.target.id.split('.')[1]+' clicked');
   }, false);
})

Would say "B clicked" etc. This would target all test.* id's you want. Obvious you dont have to use the id to anything in the click event, it could be an attribute holding a value or other things.

demo -> http://jsfiddle.net/sbeyer8f/

davidkonrad
  • 83,997
  • 17
  • 205
  • 265
  • Hey, spot on! Obviously from your answer and Kevin's, I wasn't very clear in my question. But you managed to decipher my brain because that's exactly what I'm looking for. Cheers. – bcsteeve Jul 14 '15 at 23:25
0

If you are trying to keep track of which link is clicked you can use data attributes (or any attribute, but data is simpler) and check which one is clicked. If this is not what you are asking feel free to clarify!

<a class="test" data-target="a">test A</a>
<a class="test" data-target="b">test B</a>

(function(document){
    var test = document.getElementsByClassName('test');

    var clickLink = function(){
        var target = this.dataset['target'];
    };

    for(var i = 0; i < test.length; i++){
        test[i].addEventListener('click', clickLink);
    }
})(document);
Kevin F
  • 2,836
  • 2
  • 16
  • 21
  • No, not trying to track anything. Just basically implementing internal page anchors without using anchors (because the php platform I'm working with uses # for a different purpose so when I use anchors the traditional way it breaks code). So I resorted to JS but I found that link that suggested my onClick way of doing things was wrong. Their solution didn't seem very generic, as it requires adding a line of code in the JS for every link! Unless I'm missing something. – bcsteeve Jul 14 '15 at 23:20