如何在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 beelow. What am I missing there? Thanks in advance.

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

Answer 1

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> 

Answer 2

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>