Getting the value from an HTML button using JavaScript

Question

I am making a calculator, I have already created the calculator in html and css but I am trying to move forward by making the button clicks register in the display which is what my problem is right now. I am fairly new to JavaScript so if someone could point me in the right direction on how to do it or where to find the answer I would appreciate it.

This is a the portion I am working on, trying to get button '7' to register so I can do the others.

<div class="container-fluid calc" >
 <div class="display">
  <label type="text" id="screen">0</label>

   <div class="buttons">

     <button onClick='calculate()' id='myButton'>7</button>
     <button>8</button>
     <button>9</button>

Here is the JS I put together

function calculate(){
  var num = document.getElementById('#myButton').contentValue;
  document.getElementById('screen').innerHTML = num;
}

calculate();

getElementById('#myButton') should be getElementById('myButton'). # is used in JQuery functions — Reinard
– Reinard, Commented Jan 14, 2016 at 20:00

Nikhil Aggarwal · Accepted Answer · 2016-01-14 20:01:36Z

4

You need to update from

 var num = document.getElementById('#myButton').contentValue;

to

 var num = document.getElementById('myButton').innerHTML;

answered Jan 14, 2016 at 20:01

Nikhil Aggarwal

28.5k4 gold badges46 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

sammyb123 Over a year ago

Thank you nikhil, that did it

Mike Donkers · Accepted Answer · 2016-01-14 20:16:59Z

4

You should use the .innerHTML function instead of the .contentValue function to do this, also, you shouldn't use a # in document.getElementById this is used in jQuery, so just the ID is enough

function calculate(){
    var num = document.getElementById('myButton').innerHTML;
    document.getElementById('screen').innerHTML = num;
}

calculate();

Hope this helps!

edited Jan 14, 2016 at 20:16

answered Jan 14, 2016 at 20:01

Mike Donkers

3,6992 gold badges23 silver badges35 bronze badges

5 Comments

AtheistP3ace Over a year ago

# isn't jQuery. Its a selector. You could use document.querySelector. Just to be clear. Either way +1.

Mike Donkers Over a year ago

@AtheistP3ace Thanks for that, honestly did not know that. Learning new stuff every day

AtheistP3ace Over a year ago

Well then, knowledge has been spread in numerous directions this day! =]

Mike Donkers Over a year ago

@AtheistP3ace It seems like it has! :))

sammyb123 Over a year ago

Thank you very much for your response. I tried that but its not registering on the screen, It stays blank. Is there another way of doing it?

Nelson Santos · Accepted Answer · 2016-01-14 20:20:55Z

0

Update

function calculate(){
  var num = document.getElementById('#myButton').contentValue;
  document.getElementById('screen').innerHTML = num;
}

to

function calculate(){
  var num = document.getElementById('myButton').innerText;
  document.getElementById('screen').innerText = num;
}

answered Jan 14, 2016 at 20:20

Nelson Santos

11 bronze badge

Comments

Sepehr Estaki · Accepted Answer · 2016-01-14 20:28:50Z

0

Another option is you can is data attribute like this :

<button onClick='calculate()' id='myButton' data-value="7">7</button>

and get it like this :

$("#myButton").attr("data-value");

answered Jan 14, 2016 at 20:28

Sepehr Estaki

3611 gold badge7 silver badges21 bronze badges

Collectives™ on Stack Overflow

Getting the value from an HTML button using JavaScript

4 Answers 4

1 Comment

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related