Return value for jQuery data method won't convert to Number

Question

I'm working on a JavaScript calculator and I'm refactoring the code to DRY it out by using the HTML "data" attribute. (I want to have one function for data entry, not ten functions--one per digit--as I had in v1.0.) My goal is to use jQuery to parse an integer from the data attribute, but I've hit a wall.

Here is a row of buttons in HTML:

<div class="row" id ="row3">
  <div data-number=“7” class="button number gray" id="seven">7
  </div>
  <div data-number=“8” class="button number gray" id="eight">8
  </div>
  <div data-number=“9” class="button number gray" id="nine">9
  </div>
  <div data-operand="*" class="button orange operand" id="multiply">&times;
  </div>
</div>

Here's an event trigger:

$(".number").mouseup(pushNumber);

And here's the broken function:

var pushNumber = function() {
var num =  $(this).data("number");
var parseNum = parseInt(num);
console.log(parseNum);
console.log(typeof num);
}

When I click a given button, console.log(parseNum) returns "NaN", and console.log(typeof num) returns "string". Based on the documentation for jQuery, I believe that .data should return a number here. So, all that said...
1. How can I make sure that .data returns a number, not a string?
2. Why can't I use the parseInt method on num?

Here's the full project: https://codepen.io/halfalpine/pen/MeJwmV?editors=1010

I've searched for something relevant to the best of my ability but I've come up short. My apologies if this entry is redundant!

Side note, you need to fix the typo in the fancy quotes in your HTML. Ex data-number=“9”. Actually, that may be the whole problem. — j08691
– j08691, Commented Jun 28, 2016 at 21:11
I think there is a problem with your quotes, they are other kind of character not the real " char — Alex
– Alex, Commented Jun 28, 2016 at 21:12
Don't use a word processor for editing code, use an IDE. It won't make these mistakes. — Barmar
– Barmar, Commented Jun 28, 2016 at 21:41
@Barmar, I composed the whole thing in CodePen! But I think your point is good to keep in mind nonetheless. — Dirk
– Dirk, Commented Jun 28, 2016 at 22:44

JoshBerke · Accepted Answer · 2016-06-28 21:15:12Z

2

The problem is your fancy quotes, look at your console it's outputing the values with them.

data-number=“8”

Should be

data-number="8"

answered Jun 28, 2016 at 21:15

JoshBerke

67.3k25 gold badges131 silver badges170 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

John S Over a year ago

@Dirk, Just to add: Because the browser does not recognize those characters as quotes, they are treated as part of the value, so the value is “7”, instead of just 7. That means JQuery will not automatically parse the value to an integer, and you will get NaN if you try to parse it yourself.

Louys Patrice Bessette · Accepted Answer · 2016-06-28 21:31:17Z

1

I think that JoshBerke's answer "nailed" your actual problem.

But I leave my answer, since it is a simplification of your function.

$(".number").on("mouseup", function(){
    var thisNumber = parseInt($(this).attr("data-number")); // Is an integrer here.
    console.log(thisNumber);
)};

edited Jun 28, 2016 at 21:31

answered Jun 28, 2016 at 21:19

Louys Patrice Bessette

34k7 gold badges40 silver badges69 bronze badges

2 Comments

Dirk Over a year ago

Apparently, the .data method can convert to a Number automatically, so now it can be written simply as var num = $(this).data("number");

Louys Patrice Bessette Over a year ago

About .data() method, you should read on here. This is different from retreiving the value of the data-number attribute .

Collectives™ on Stack Overflow

Return value for jQuery data method won't convert to Number

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related