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

Utilizing a responsive design with a bootstrap grid system, featuring expandable columns for

Graph only displays data after button is clicked

PHP error: Index not defined

Step-by-step guide to inserting an image into a Table Cell

Version 13 of the Discord slash command encounters an "interaction failed" error

Creating a conditional property in TypeScript based on an existing type - a comprehensive guide

The canvas div wrapper flexbox item is in need of scrollbars

How to ensure that a div element occupies the entire height of the webpage

transferring information between controllers and saving it persistently in AngularJS even after refreshing the

Managing multiple sets of radio buttons using the useState hook

Display personalized error messages using jQuery and PHP

PHP - Extract Information from Table Upon Form Submission without User Input

The event for closing the React Select MUI dropdown does not trigger when selecting multiple options

Using JavaScript to dynamically change the IDs of multiple select elements during runtime

Tips for minimizing the need to copy the entire dojo library each time you create a new Java EE package for deployment on GlassFish

Having trouble with PHP Storm and Vue component not working? Or encountering issues with unresolved function or method in your

JavaScript can be utilized to generate an array containing duplicated phrases from a given text

Ways to retrieve only the chosen option when the dropdown menu features identical names

Is there a way to set the same href link for the active class in the navbar using bootstrap-vue?

Dropdown Box Internal Link Selector Code