0

So I'm pretty new when it comes to java script and creating chrome extensions. So what I'm trying to do is to take two values which the user has inputted, add them together and display after the user has clicked calculate. However I can't seem to get it to work and I don't know what I'm doing wrong. I would greatly appreciate any assistance.

Here is my HTML code:

<!DOCTYPE html>
    <html>
        <head>
            <h1>Simple Calculator</h1>
            <script src="script.js"></script>
        </head>
        <body>
            First Value<input type="text" id="ValueA"/><br>
            Second Value<input type="text" id="ValueB"/><br>

            Invested Cost<input type="text" id="result"/><br>
            <button id="Calc;">Calculate</button>
        </body>
    </html>

My java script:

document.getElementById("Calc").addEventListener("click", Sum);

function Calc()
        {
            var A = document.getElementById('ValueA').value;
            var B = document.getElementById('ValueB').value;
            var C = A+B;
            document.getElementById('result').value = C;
        }

and finally my manifest:

{
    "manifest_version": 2,
    "name": "Simple Calculator",
    "version": "1.0",
    "description":  "Simple Calculator",

    "browser_action":{
        "default_popup": "popup.html"
    }

}
Raiex
  • 3
  • 1

1 Answers1

0

You need to call Calc() function in event listener. Right now, you are invoking Sum

Also, as @Julian said in the comment, you need to remove ; from button id

mrblue
  • 237
  • 1
  • 12
  • So I've made the changes but now all I get is: Uncaught TypeError: Cannot read property 'addEventListener' of null, If possible could you tell me what I've done wrong and perhaps clarify what this error means? – Raiex Feb 17 '20 at 11:10
  • If you have error `Cannot read property 'addEventListener' of null`, it means that `document.getElementById("Calc")` returns null. Most common mistake is a typo. Check out if button has id `Calc` (this is case sensitive). Button should be like this ``. There's a typo in your code above - ` – mrblue Feb 17 '20 at 11:18
  • Thank you for the help explanation and the help. All working now :) – Raiex Feb 17 '20 at 11:34
  • You are welcome :-) btw. You can mark the question as answered ;-) – mrblue Feb 17 '20 at 11:36