How to use a value of an input text in javascript

Question

I'm building a functionality on my "pig game", so the user can set himself the winning value if he wish, by entering it in an input field.

I need to use the value the user enter in an <input type="text">, in order to change a behavior in my JavaScript code.

I wrote my input as :

<div class ="newInputScore">
    <label for="fixGoal">SET THE GOAL :</label><br>
    <input name = "fixGoal" type = "text" id = "fixGoal">
</div>

and I need to use the value the user write in the above input, in my JS code. So far, I tried :

let choosenScore = parseInt(document.getElementById('fixGoal').value);
if (scores[activePlayer] >= 100 || scores[activePlayer] >= choosenScore){...

... but it seems like my input is returning me a value of 0, because the player is actually winning with a score > 0 with the above code. I console log()'ed choosenScore and it returns me NaN, then undefined on the line below. What am I missing there? Thanks in advance.

link to the project (dices don't appears because files are on my computer) : https://codepen.io/Peyo5202/pen/dybqyXV

*"it seems like my input is returning me a value of 0"* . Did you log it to see if the value is really 0? — Calvin Nunes, Sep 16 '19 at 14:18
Check if the value is really 0 with a console log and parse choosenScore to an integer, now it is a string. Check also the value of scores[activePlayer] with a console log — Pasquale De Lucia, Sep 16 '19 at 14:26
I console loged "choosenScore" and it now returns me NaN, and undefined on the line below. I actually added parseInt() to choosenScore, though im not sure i whrote it well. Any other advice? — Peyo, Sep 16 '19 at 15:21
Please include a [mre]. You can use [Stack Snippets](https://meta.stackoverflow.com/q/358992/215552) to do so. — Heretic Monkey, Sep 16 '19 at 15:22
[parseInt](https://developer.mozilla.org/sv-SE/docs/Web/JavaScript/Reference/Global_Objects/parseInt) on an empty string gives you [NaN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN) (Not a Number) — some, Sep 16 '19 at 15:26
When i console.log "choosenScore" without parseInt, it returns me undefined. I also provided a link to a codepen with the project (dices arent shown because files are on my computer). — Peyo, Sep 16 '19 at 15:57

score 0 · Answer 1 · answered Sep 16 '19 at 16:03

0

Please provide more details, as you can see, your code works...

let choosenScore = parseInt(document.getElementById('fixGoal').value);

<div class ="newInputScore">
    <label for="fixGoal">SET THE GOAL :</label><br>
    <input name = "fixGoal" type = "text" id = "fixGoal">
</div>

<button onclick="console.log(parseInt(document.getElementById('fixGoal').value))">Start</button>

answered Sep 16 '19 at 16:03

Black

18,150
39
158
271

Code doesnt worck because as soon as you hold any value, you win the game.Even if you stated say like "50" in the input, if you hold any number you instatnly win the game. I think it has to do with this part : ```if (scores[activePlayer] >= 100 || scores[activePlayer] >= choosenScore)```. It seems to set choosenScore to "0", no matter what you whrite in the input. – Peyo Sep 16 '19 at 16:22

score 0 · Answer 2 · answered Sep 16 '19 at 18:15

There is type coercion (attempt to convert variables to same type) when you try to compare two variables that are not of the same type with javascript comparison operators - in your case, undefined converts to NaN and

...with the caveat that any comparison involving NaN evaluates to false

see this post to get a full explanation of this. Finally, false converts to +0.

Suggestion:

Why not just put a default value of "0" for the input

<div class ="newInputScore">
    <label for="fixGoal">SET THE GOAL :</label><br>
    <input name = "fixGoal" type = "text" id = "fixGoal" value = "0">
</div>

<button onclick="console.log(parseInt(document.getElementById('fixGoal').value))">Start</button>

or better still, get the value of choosenScore with a ternary operator

function choosenScore() {
    let choosenScore = document.getElementById('fixGoal').value;
    return parseInt(choosenScore ? choosenScore : 0);
}

<div class ="newInputScore">
    <label for="fixGoal">SET THE GOAL :</label><br>
    <input name = "fixGoal" type = "text" id = "fixGoal">
</div>

<button onclick="console.log(choosenScore())">Start</button>

How to use a value of an input text in javascript

2 Answers2