Javascript Calculator with Dual Input Fields

Question

Javascript Calculator with Dual Input Fields

I have been given a task to create a calculator by tomorrow using Javascript. Unfortunately, I am currently taking a distance course and Javascript has just been introduced in this assignment. While I am familiar with HTML and CSS, Javascript is something that I find really challenging.

Although I have started working on the code for the calculator, I am stuck because I cannot seem to find any relevant resources online that explain how to create a similar calculator or provide a simple explanation of Javascript. The calculator should not feature a submit button and its design is not important, but it needs to include two text fields.

function Calculate() {
  var number1 = document.getElementById("number1").value;
  var number2 = document.getElementById("number2").value;
  number1_parsed = parseInt(number1);
  number2_parsed = parseInt(number2);
  if (number1_parsed) {} else
    alert("Wrong characters");
  return false;
} {
  sum = number1_parsed + number2_parsed;
  alert("Sum: " + sum);
}

<div id="calculator">
  <h1> Calculator </h1>
  <form name="kalkylator">
    <input type="text" name="number1" id="number1" size="10" />
    <input type="text" name="number2" id="number2" size="10" />
    <input type="button" onclick="Calculate();" id="calculate" value="Result">
  </form>
</div>

javascript html css

Answer 1

Answer №1

Ensuring your code is well-formatted is crucial for easier debugging. Accurate indentation plays a key role in this process. If these guidelines were followed, you would have likely spotted the issues with the curly braces.

In addition, there are inconsistencies in your variable naming.

For instance:

You missed an open curly brace ({) after the else statement
There is an unexpected open curly brace before the line:
```
summa = number1_parsed + number2_parsed;
```
You called parseInt(tal1); but the variable should be number1, not tal1
The variable used to store the sum is sum, while the alert reference uses summa

var number1 = document.getElementById("number1");
var number2 = document.getElementById("number2");

function Calculate() {
  var number1_parsed = parseInt(number1.value);
  var number2_parsed = parseInt(number2.value);
  if (isNaN(number1_parsed) || isNaN(number2_parsed)) {
    alert("Wrong characters");
    return false;
  }

  var sum = number1_parsed + number2_parsed;
  alert("Sum: " + sum);
}

<div id="calculator">
  <h1> Calculator </h1>
  <form name="kalkylator">
    <input type="text" name="number1" id="number1" size="10" />
    <input type="text" name="number2" id="number2" size="10" />
    <input type="button" onclick="Calculate();" id="calculate" value="Result">
  </form>
</div>

Answer 2

Ensuring your code is well-formatted is crucial for easier debugging. Accurate indentation plays a key role in this process. If these guidelines were followed, you would have likely spotted the issues with the curly braces.

In addition, there are inconsistencies in your variable naming.

For instance:

You missed an open curly brace ({) after the else statement
There is an unexpected open curly brace before the line:
```
summa = number1_parsed + number2_parsed;
```
You called parseInt(tal1); but the variable should be number1, not tal1
The variable used to store the sum is sum, while the alert reference uses summa

var number1 = document.getElementById("number1");
var number2 = document.getElementById("number2");

function Calculate() {
  var number1_parsed = parseInt(number1.value);
  var number2_parsed = parseInt(number2.value);
  if (isNaN(number1_parsed) || isNaN(number2_parsed)) {
    alert("Wrong characters");
    return false;
  }

  var sum = number1_parsed + number2_parsed;
  alert("Sum: " + sum);
}

<div id="calculator">
  <h1> Calculator </h1>
  <form name="kalkylator">
    <input type="text" name="number1" id="number1" size="10" />
    <input type="text" name="number2" id="number2" size="10" />
    <input type="button" onclick="Calculate();" id="calculate" value="Result">
  </form>
</div>

Javascript Calculator with Dual Input Fields

Answer №1

Similar questions

Guidelines for incorporating JS in Framework7

Creating a fixed footer within a div that is absolutely positioned using CSS

Disappearing table borders in print view on Firefox

The thumb of the range input is misaligned with the axis markers

How come a Google Maps API component functions properly even without using *NgIf, but fails to work when excluded in Angular 9?

I have successfully implemented an onChange function with its corresponding set of parameters. However, I now desire to extend its functionality by incorporating

Using Rails and HAML to incorporate looping HTML5 video tags

Guide on displaying the <html> tag within text using AngularJS

What steps do I need to take in order to integrate an mpg video onto my

Express.js error: Unexpected closing parenthesis after argument list

The CSS navigation bar is not properly aligned in the center

I am attempting to properly arrange my navigation links and logo in alignment

JQuery: Issues with attaching .on handlers to dynamically added elements

WP How can I modify a particular thumbnail size with a custom CSS class?

Insert a new key/value pair into a designated object in Javascript

Php file not receiving data from ajax post method

Is it more beneficial to keep a function inside or outside another function if it is only being used within it?

Learn how to trigger an HTTP exception after a failed command in a saga with NestJS CQRS

How can one discern the most effective method to identify JavaScript code that alters particular HTML content on a webpage?

retrieve data properties from an object