0

I'm learning JS but have hit a roadblock. I have links that have the attribute "number". I'd like to extract the value of "number" from each link, set it as a new variable, and then assign an onclick action to each link incorporating the corresponding value. I've been able to extract each value but don't know how to use them in the onclicks.

HTML

<a class="button call" href="#" number="6135555556">Call pager</a>
<a class="button call" href="#" number="6135555555">Call cell</a>

JS

var data = document.getElementsByClassName("call");
var numbers = '';
for (var i = 0; i < data.length; i++) {
    numbers += data[i].getAttribute("number");
    numbers[i].onclick = console.log("call " + numbers[i]);
}
Ash
  • 27
  • 7

2 Answers2

0

If you want to the particular value on click of particular link then you can use this code.

var data = document.getElementsByClassName("call");
var numbers = [];
for (var i = 0; i < data.length; i++) {
     data[i].onclick = getNumber;
}

function getNumber(){
    numbers.push(this.dataset['number']);
    alert(this.dataset['number']);
}

Here is the DEMO

There is no number property on anchor tag, so for your need we can use data-* property which allows you to store needful information on html.

Suman Bogati
  • 6,289
  • 1
  • 23
  • 34
  • 1
    You should point out that this also requires changing the attribute name to `data-number` instead of just `number`. – James Montagne Feb 07 '14 at 20:49
  • Thank you, this works very well. How can I do a GET in that function using the 'number'? Sorry, my brain is much today, I've been staring at this for too long. – Ash Feb 07 '14 at 21:00
  • As I said number is not standard property for anchor tag, so we can not use it, Is not suitable `data-number` for you? – Suman Bogati Feb 07 '14 at 21:03
  • Yes, I should have mentioned that I did change it to data-number. – Ash Feb 07 '14 at 21:05
  • You can do like this `number = this.dataset['number']` for good. – Suman Bogati Feb 07 '14 at 21:08
  • Please have look updated answer for get the number in function. – Suman Bogati Feb 07 '14 at 21:14
  • Thank you, it's working perfectly in JSFiddle, I just need to implement into my project now. – Ash Feb 07 '14 at 21:22
  • Hello Suman. I'm trying to integrate it into my page http://jsfiddle.net/s45jk/ and am getting this error:Uncaught TypeError: Cannot read property 'number' of undefined . 'number' is the data-set as you can see in the HTML. Any ideas? – Ash Feb 10 '14 at 15:49
  • Ash, your code is working fine, only problem is you are calling extra `getNumber();` at end of code. Please have a look updated code http://jsfiddle.net/s45jk/1/ – Suman Bogati Feb 10 '14 at 17:03
  • Suman, thank you again for the help. The reason I have the extra getNumber(); is because when I click my links on my actual site, nothing happens and I receive no errors. On jsfiddle it works. I tried to console.log("This works!"); into the function but it never fires. Any ideas on that? It's hard to troubleshoot when I don't have errors. – Ash Feb 10 '14 at 17:31
  • Can you confirm that `getNumber()` function is binding with `` tag, it seems that the function is not binded. – Suman Bogati Feb 10 '14 at 17:35
  • Please read the steps under **Breakpoints on JavaScript Event Listeners** with this article https://chromedevtools.googlecode.com/svn-history/r421/trunk/tutorials/breapoints/index.html, you can add the break point in 'onclick' event, it travels you through the code. – Suman Bogati Feb 10 '14 at 18:00
  • Suman, I figured it out, it was much simpler. I had to wrap the adding numbers to the array in window.onload so that it would start to it's thing after everything was loaded. It works now. Thank you so much for all your help! – Ash Feb 10 '14 at 18:33
  • Great you figured it out. So your dom was not ready when your pushing number script is executing. Wondering why the error was not in console. Anyway I am happy for you. – Suman Bogati Feb 10 '14 at 18:39
0

This may not be entity correct, but assuming what you wanted was to console log the contained phone number whenever a link was clicked, there are probably 3 main changes you'd want to look at.

1) I'm guessing you wanted to connect your onclick event to the link element with the number in it data[i], rather to the number itself?

2) += will concatenate each found value on to the previous one. This may be what you wanted, although in the below code I've changed it only to log the current number

3) onclick expects to be passed a function, which it will then run when the click event is fired. Wrapping your console log in a function provides it to the onClick in the format it expects.

Assuming all that's right, the js to work with the above links should look something like this:

var data = document.getElementsByClassName("call");
for (var i = 0; i < data.length; i++) {
    data[i].onclick = function() { console.log("call " + this.getAttribute("number"));    }
}

Hope that helps :)

Edit: Updated the code to fix the bug james montagne pointed out below. The getAttribute is now performed within the context of the click event, meaning the issue with scoping is avoided. Sorry about that, completely missed the issue.

Carl
  • 1,816
  • 13
  • 17
  • 2
    This is closer but will suffer from the issue of always displaying the last number from the loop. See this for further information: http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example – James Montagne Feb 07 '14 at 20:51