Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial


simple calculator with html, css, js

I have created a simple calculator, and I am trying to add items, and I want to print the results on the console. The problem is when I press the button with id "addbtn" it does not add the items. It seems that something working in the background but, when I check the console I just see nothing.

 <link rel="stylesheet" href="style.css">
<div id="container">
  Number 1:<input type="text" id="input1" /><br>
  Number 2:<input type="text" id="input2" />
<div id="operations">
  <button id="addbtn">+</button>
  <button id="subtractbtn">-</button>
  <button id="multiplybtn">*</button>
  <button id="divide"btn>/</button>
  Result: <input type="text" id="result"/>
<script src="app.js"></script>

 #container {
  border:2px solid #3b5998;
  background-color: #d3d3d3;

var num1=document.getElementById('input1').value;
var num2=document.getElementById('input2').value;
var addvar=document.getElementById('addbtn');
var subtractvar=document.getElementById('subtractbtn');
var multiplyvar=document.getElementById('multiplybtn');
var dividevar=document.getElementById('dividebtn');

addvar.addEventListener("click", function add(){console.log(num1 + num2)});```

2 Answers

Hi! You are getting the values for the input buttons before they are being assigned with any values, That's why your code doesn't work. Instead, you have to get the values from inside your click function

var num1=document.getElementById('input1'); // removed the .value from the variable declarations
var num2=document.getElementById('input2');
var result = document.getElementById("result");//created variable for result input
addvar.addEventListener("click", function(){
var firstNum = parseInt(num1.value); //get the values from num1 and num2 inputs and turn the string into a number with parseInt() so the calculation will work
  var secondNum = parseInt(num2.value);
  result.value = firstNum + secondNum; //print the result into result input
  console.log( firstNum+ secondNum);

also I noticed you have a typo in your html where you set an id to your divide button

<button id="divide"btn>/</button> 

also, since your inputs should be only numbers you should change your input type to "number" for your inputs. This way writing letters to the inputs isn't possible. If you want to hide the spin-button arrows of the number input you can add this to your css

input::-webkit-inner-spin-button {

    -webkit-appearance: none;
    margin: 0; 

Hi, this works. thx