parseFloat is not working

Question

I don't know why I'm stumped on this simple problem, but I'm trying to test a simple clicker game with parseFloat(). But it won't work! Any ideas?:

<!--ADD POINTS-->
<button onclick="add()">
  CLICK ME
</button>
<script>
  var score = parseFloat(document.getElementById('score').value);

  function add() {
    score += 1;
    document.getElementById('score').innerHTML = score;
  }
</script>

Can you clarify what you mean by "it won't work"? What were you expecting it to do, and what does it actually do? — CRice, Jul 10 '18 at 01:50
where is this element with ID `score`? ... and you seem to use both value and innerHTML on the same element - a sure sign that you're doing it wrong — Jaromanda X, Jul 10 '18 at 01:54
First, check whether you have any value in `score` on page load or not? then take value from `score` inside `add` function. — Arulraj, Jul 10 '18 at 05:59

NullPointer · Answer 1 · 2018-07-10T02:00:05.023

I am not sure from your question what your are looking for but if you just want to get the value from text box and want to display by increment.Refer this code snippet.

Also .innerHTML is not the correct way to set value in input element.

  

 function add() {
 var score = parseFloat(document.getElementById('score').value);
 if(!score){
 score=0;
 }
 score += 1;
 document.getElementById('score').value = score;
 }

<!--ADD POINTS-->
<input type="text" id="score" />
 <button onclick="add()">
    CLICK ME
 </button>


 </body>
 </html>

Grant Miller · Answer 2 · 2019-03-02T17:31:15.447

0

Here's a simplified solution that will allow you to increment the value of an input element by 1:

const add = () => {
  const score_container = document.getElementById('score-container');
  let score = parseFloat(score_container.value);
  
  score_container.value = score + 1;
};

<!-- ADD POINTS -->

<button onclick="add()">CLICK ME</button>

<input id="score-container" type="text" value="0">

edited Mar 02 '19 at 17:31

answered Jul 10 '18 at 04:14

Grant Miller

27,532
16
147
165

score 0 · Answer 3 · answered Jul 10 '18 at 05:45

You are getting initial value of score using .value property of element. For which #score element need to be an input field.

var score = parseFloat(document.getElementById('score').value);

But inside the add function you are using innerHTML:

document.getElementById('score').innerHTML = score;

InnerHTML will not work for input fields.

So if your #score element is input field, then change add function like this:

function add() {
     score += 1;
     document.getElementById('score').value= score;
 }

Or, if it is any other html element like <div> or <p> tag, then change initialization statement like this:

var score = parseFloat(document.getElementById('score').innerHtml);

score 0 · Answer 4 · answered Jul 10 '18 at 06:08

Working code for you. Try this.

  function add() {
    var score = parseFloat(document.getElementById('score').value);
    score += 1;
    document.getElementById('score').value = score;
  }

<input type="text" value="4" id="score"/>
<button onclick="add()">
  CLICK ME
</button>

score 0 · Answer 5 · answered Jul 10 '18 at 06:21

Give initial score 0 so when the game starts the point will be 0.

<input type="text" id="score" value="0"/>

when the button is clicked call the following function

function add() {
  var score = parseFloat(document.getElementById('score').value);
  score += 1;
  document.getElementById('score').value = score;
  }

parseFloat is not working

5 Answers5