Why im i getting NaN when using parseINt or undefined?

Question

I'm getting NaN despite using parseInt or .value, and I don't understand why is that. I also tried changing the code, but then im getting undefined. As a beginner I don't get what I'm doing wrong despite it being so simple. Any tips?

const btn = document.querySelector('.btn');
btn.addEventListener('click',calcWinner);

function calcWinner(e){
  const powerG   = document.querySelector('#power-g');
  const  techG  = document.querySelector('#tech-g');
  const  chanceG  = document.querySelector('#chance-g');
  const powerF   = document.querySelector('#power-f');
  const  techF  = document.querySelector('#tech-f');
  const  chanceF  = document.querySelector('#chance-f');
  let gokuR =  parseInt(powerG + techG + chanceG)
  let friezeR = parseInt(powerF.value) + parseInt(techF.value) + parseInt(chanceF.value);
  console.log(parseInt(gokuR.value));
 
}

<body>
  <div class="container">
    <div class="goku">
      
      <h2>Battle chance</h2>
      <form action="">
        <input type="number" name="" id="power-g" >
        <label for="power-g">Power</label>
        <input type="number" name="" id="tech-g" >
        <label for="tech-g">Technique</label>
        <input type="number" name="" id="chance-g" >
        <label for="chance-g">Chance</label>
      </form>
    </div>
    <div class="frieza">
     
      <h2>Battle chance</h2>
      <form action="">
          <input type="number" name="" id="power-f" >
          <label for="power-f">Power</label>
          <input type="number" name="" id="tech-f" >
          <label for="tech-f">Technique</label>
          <input type="number" name="" id="chance-f" >
          <label for="chance-f">Chance</label>
      </form>
    </div>
  </div>
  <h1 >Winner : <span class="winner"></span></h1>
  <a href="#" class="btn">CalcWinner</a>
  <script src="app.js"></script>
</body>

`friezeR` works, right? `gokuR` doesn't, as you're *not* use `.value` — Bergi, May 13 '18 at 13:10
The `form` tag is used when submitting information back to the server, so it's used a bit incorrectly in your case https://stackoverflow.com/questions/12064557/multiple-form-tags-in-page-or-one-form-tag. Also, if you haven't already please see the https://stackoverflow.com/tour and https://stackoverflow.com/help/someone-answers — Slai, May 13 '18 at 13:57

Asons · Answer 1 · 2018-05-13T14:56:58.213

First, grab the value instead of the element, e.g. like this:

const powerG   = document.querySelector('#power-g').value;

Then use either parseInt, Number or + to convert the String number to an actual number, and you will be able to calculate the result.

Stack snippet

const btn = document.querySelector('.btn');
btn.addEventListener('click',calcWinner);

function calcWinner(e){
  const powerG   = document.querySelector('#power-g').value;
  const  techG  = document.querySelector('#tech-g').value;
  const  chanceG  = document.querySelector('#chance-g').value;
  const powerF   = document.querySelector('#power-f').value;
  const  techF  = document.querySelector('#tech-f').value;
  const  chanceF  = document.querySelector('#chance-f').value;
  let gokuR =  Number(powerG) + Number(techG) + Number(chanceG);
  let friezeR = parseInt(powerF) + parseInt(techF) + parseInt(chanceF);
  console.log(gokuR);
  console.log(friezeR); 
}

  <div class="container">
    <div class="goku">
      
      <h2>Battle chance</h2>
      <form action="">
        <input type="number" name="" id="power-g" >
        <label for="power-g">Power</label>
        <input type="number" name="" id="tech-g" >
        <label for="tech-g">Technique</label>
        <input type="number" name="" id="chance-g" >
        <label for="chance-g">Chance</label>
      </form>
    </div>
    <div class="frieza">
     
      <h2>Battle chance</h2>
      <form action="">
          <input type="number" name="" id="power-f" >
          <label for="power-f">Power</label>
          <input type="number" name="" id="tech-f" >
          <label for="tech-f">Technique</label>
          <input type="number" name="" id="chance-f" >
          <label for="chance-f">Chance</label>
      </form>
    </div>
  </div>
  <h1 >Winner : <span class="winner"></span></h1>
  <a href="#" class="btn">CalcWinner</a>

@TodorIvanov There is no real _double `+`_, what the extra `+` does when prefixed the variable, it convert it to a number, just like `parseInt` or `Number()` does. — Asons, May 13 '18 at 13:31
@TodorIvanov I updated my answer with a few links (blue text) to the 3 ways to convert a string to a number. — Asons, May 13 '18 at 13:37

score 0 · Answer 2 · answered May 13 '18 at 13:14

Without the HTML it is hard to give you an accurate answer. But parseInt() is meant for a string. You are trying to use it on elements instead of strings. You need to get the value of the HTML element instead of the element itself.

Instead of:

const powerG   = document.querySelector('#power-g');

You would need to do something like:

const powerG   = document.querySelector('#power-g').value;

Reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt

@TodorIvanov what arrow function? You need to pass parseInt two things: a string you want to parse and a radix (usually 10). `parseInt("3", 10) === 3` — Jared Smith, May 13 '18 at 13:17

Why im i getting NaN when using parseINt or undefined?

2 Answers2