parseInt() vs Number() change string to a number, not working

JavaScript
1

Hello everyone,

I been working with a code sometime and i wanted to change a string into a number, Should be pretty easy right? but for some reason Number() method wont work, so doing this will increase my quantity. the following code will work ok! with parseInt();

var value = parseInt(qty.textContent, 10);

Bu the following code wont work with Number();

var value = Number(qty); // why with Number I cannot get the same output

Full code on CodePen:
https://codepen.io/ivanmt07/pen/vYOaPpv?editors=1011

2

Hello. In parseInt function, you are passing qty.textContent as parameter, while in Number function you are passing just qty to it.

3

OMG sorry for the typo… its true thank you so much, i just did it but one more question why not taking out the

qty.textContent
and have it as a regular method for both like this example:

// with parseInt()
<p id="number">1</p>
var stringNumber = document.getElementById('number');
var value = parseInt(stringNumber); // converts as a number

// with Number()
<p id="number">1</p>
var stringNumber = document.getElementById('number');
var value = Number(stringNumber); // converts as a number

Not using the qty.textContent. on this one why wont work the same ?

4

None of them will work in those cases because you are passing the element reference (document.getElementById(‘number’)) to the functions, but a string is expected.
For them to work you should access the element content (for example with .innerHTML):

let stringNumber = document.getElementById('number').innerHTML;

let value = parseInt(stringNumber);
value = Number(stringNumber);

Hope this answer your question.

1 Like
5

Hi there @napolimatiase thanks for the feedback, so for example in my codepen scenario…
i have this line, and i added the innerHTML at the end.:

var qty = event.target.parentNode.querySelector(".qty").innerHTML;

For the lines i took away the textContent:

var value = parseInt(qty);
 var value = Number(qty);

Finally at this line i leave it the way it is but not sure, its working.
qty.innerHTML = value + change;

But wont display on, trying to work on it.

1 Like
6

Good luck, ask anything about the challenge and I’ll try to help you (or anybody else in the forum surelly will!).

Two more things:

  • I’d recommend you to use parseInt, since Number is actually an object and not intended to be used as you are trying to.
  • Remember that you have online documentation in case you need to know about some function behaviour.
7

Hello @napolimatiase
Thank you so much for your feedback and support. I have read carefully your recommendation and i came up with a better solution. i also updated the codepen for future reference.

  1. i have used parseInt() for better practices.
  2. yes i surely have find online recommentations and tutorials. thank for the advice.
  3. I have write the code here and the steps that i did in order to archive my goal.
  4. I add an additional feature where you can subtract as well the quantity.
  5. i updated codepen. https://codepen.io/ivanmt07/pen/vYOaPpv?editors=1011 
const parent = document.getElementById('parentContainer');
// we do Event Delegation (bubbling) with the main parent div container.
// listen for a click on any of the parent container.
// We look/focus for a button click.
parent.addEventListener('click', function (event) {
  if( event.target.nodeName === 'BUTTON' ){
      addQty(event.target);
  }

}, false);

function addQty(button){
  // 1. Grab get the same parent button as well the qty element.
  var qty = button.parentNode.querySelector('.qty');
  // 2. Here we access the element content. (as string).
  var valueText = qty.textContent;
  // 3. we get that element content and turn the string into number.
  var value = parseInt(valueText);
  // 4. We evaluate if button has a class of 'click-me' and adds a 1 if not subtracts a -1.
  let sum;
    if( button.className === 'click-me' ){
      sum = 1;
    }else{
      sum = -1;
    }
  // 5. We display the result in the DOM. 
  qty.textContent = value + sum;
};

Thank you for your advice and guidenness in order to archive my goal for better practices.

1 Like