CODEWITHSUNDEEP
javascripthtmlfunctioncalculator
sammyb123
sammyb123

Reputation: 493

Getting the value from an HTML button using JavaScript

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();

Upvotes: 3

Views: 94

Answers (4)

Sepehr Estaki
Sepehr Estaki

Reputation: 351

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");

Upvotes: 0

Nelson Santos
Nelson Santos

Reputation: 1

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;
}

Upvotes: 0

Mike Donkers
Mike Donkers

Reputation: 3699

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!

Upvotes: 4

Nikhil Aggarwal
Nikhil Aggarwal

Reputation: 28475

You need to update from

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

to

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

Upvotes: 4

Related Questions