-1

I am extremely new to java script and html and my project right now is to make a simple calculator, however, I cannot get my button to output an answer and I cannot seem to figure out why

my Html code is:

    <html>
    <head>
    <title>Calculator</title>
    <link rel="stylesheet" href="styles.css">
    </head>

    <body>

    First Number:<br>
   <input type ="number" id="num1"><br>
   Second Number:<br>
  <input type ="number" id="num2"><br>
  Answer:<br>
  <input type= "number" id="answer"><br>


<button id ="add" onclick="add()"> + </button>
  <button id ="subtract" onclick="subtract()"> - </button>
    <button id ="divide" onclick="divide()"> / </button>
      <button id ="multiply" onclick="multiply()"> * </button>


     <script src="main.js"></script>
    </body>
    </html>

and my js code is 

 var num1 = document.getElementById('num1').value;
 var num2 = document.getElementById('num2').value;
 var ans = document.getElementById('answer').value;

 function add(){
   ans = num1 + num2;

 document.getElementById('answer').value = ans;  
 }

 function subtract(){
   ans = num1 - num2;

 document.getElementById('answer').value = ans;  
 }

 function divide(){
   ans = num1 / num2;

 document.getElementById('answer').value = ans;  
 }

 function multiply(){
   ans = num1 * num2;

 document.getElementById('answer').value = ans;  
 }
Dan Cornilescu
  • 37,297
  • 11
  • 54
  • 89
Liz Morales
  • 27
  • 4

1 Answers1

0

chrome extension/apps do not allow inline definition of event handler (https://developer.chrome.com/extensions/contentSecurityPolicy#JSExecution). use something along the lines:

document.getElementById('add').addEventHandler('click', function() {
    ...
}
Moe
  • 215
  • 1
  • 7