Creating a custom calculator using Javascript

Question

Creating a custom calculator using Javascript

As a beginner in Javascript, I am seeking assistance in creating a simple calculator that can add numbers as buttons are clicked and display the running total.

For example: If I click the button "20," it should display the number 20. Then, if I click the button "5," it should display the total of 25, and so on.

Here is the basic code I have managed to put together so far:

<form name="Calc">
<input type="text" name="Numbers" size="16"><BR>
<input type="button" value="  5  " onClick="document.Calc.Numbers.value += '5'">
<input type="button" value="  10  " onClick="document.Calc.Numbers.value += '10'">
<input type="button" value="  20  " onClick="document.Calc.Numbers.value += '20'">
<input type="button" value="  30  " onClick="document.Calc.Numbers.value += '30'">
<input type="button" value="  50  " onClick="document.Calc.Numbers.value += '50'">
</form>

javascript

Answer 1

Answer №1

I have identified two main issues with your current implementation:

You have enclosed your numbers within single quotes in the onClick handlers ('5' instead of 5). This leads to string concatenation instead of addition.
The value property of form elements is always treated as a string. Even after resolving the first issue, you still perform string concatenation because JavaScript treats numbers added to strings as concatenation. To address this, you need to parse the values in Numbers before performing addition. For a simple fix in your current project, you can prepend a + to coerce them into numbers:
```
document.Calc.Numbers.value = +document.Calc.Numbers.value + theNumberToAdd
```

Below is an example incorporating these two changes:

<form name="Calc">
<input type="text" name="Numbers" size="16"><BR>
<input type="button" value="  5  " onClick="document.Calc.Numbers.value = +document.Calc.Numbers.value + 5;">
<input type="button" value="  10  " onClick="document.Calc.Numbers.value = +document.Calc.Numbers.value + 10;">
<input type="button" value="  20  " onClick="document.Calc.Numbers.value = +document.Calc.Numbers.value + 20;">
<input type="button" value="  30  " onClick="document.Calc.Numbers.value = +document.Calc.Numbers.value + 30;">
<input type="button" value="  50  " onClick="document.Calc.Numbers.value = document.Calc.Numbers.value 50;">
</form>

However, I would recommend a different approach:

Organize your JavaScript code in a separate JavaScript file or a script block within the same file.
Utilize a JavaScript variable to store your current value.
Attach a single click handler to the form to take advantage of event bubbling from descendant elements to ancestors.

Here is an alternative implementation:

// A scoping function to avoid global variables
(function() {
  // Current value
  var value = 0;
  
  // Select the form
  var form = document.querySelector("form[name=Calc]");

  // Set the initial display of the value
  form.Numbers.value = value;
  
  // Add the click handler
  form.addEventListener(
    "click",
    clickHandler,
    false
  );

  // Handle clicks
  function clickHandler(event) {
    var amount;
    
    // Is the click on an input element?
    if (event.target && event.target.tagName.toUpperCase() === "INPUT") {
      // Obtain the input value as a number
      amount = +event.target.value;
      
      // Add it to the total value
      value += amount;
      
      // Display the result
      form.Numbers.value = value;
    }
  }
})();

<form name="Calc">
<input type="text" name="Numbers" size="16"><BR>
<input type="button" value="  5  ">
<input type="button" value="  10  ">
<input type="button" value="  20  ">
<input type="button" value="  30  ">
<input type="button" value="  50  ">
</form>

The above code may seem verbose due to the explanatory comments included.

Answer 2

I have identified two main issues with your current implementation:

You have enclosed your numbers within single quotes in the onClick handlers ('5' instead of 5). This leads to string concatenation instead of addition.
The value property of form elements is always treated as a string. Even after resolving the first issue, you still perform string concatenation because JavaScript treats numbers added to strings as concatenation. To address this, you need to parse the values in Numbers before performing addition. For a simple fix in your current project, you can prepend a + to coerce them into numbers:
```
document.Calc.Numbers.value = +document.Calc.Numbers.value + theNumberToAdd
```

Below is an example incorporating these two changes:

<form name="Calc">
<input type="text" name="Numbers" size="16"><BR>
<input type="button" value="  5  " onClick="document.Calc.Numbers.value = +document.Calc.Numbers.value + 5;">
<input type="button" value="  10  " onClick="document.Calc.Numbers.value = +document.Calc.Numbers.value + 10;">
<input type="button" value="  20  " onClick="document.Calc.Numbers.value = +document.Calc.Numbers.value + 20;">
<input type="button" value="  30  " onClick="document.Calc.Numbers.value = +document.Calc.Numbers.value + 30;">
<input type="button" value="  50  " onClick="document.Calc.Numbers.value = document.Calc.Numbers.value 50;">
</form>

However, I would recommend a different approach:

Organize your JavaScript code in a separate JavaScript file or a script block within the same file.
Utilize a JavaScript variable to store your current value.
Attach a single click handler to the form to take advantage of event bubbling from descendant elements to ancestors.

Here is an alternative implementation:

// A scoping function to avoid global variables
(function() {
  // Current value
  var value = 0;
  
  // Select the form
  var form = document.querySelector("form[name=Calc]");

  // Set the initial display of the value
  form.Numbers.value = value;
  
  // Add the click handler
  form.addEventListener(
    "click",
    clickHandler,
    false
  );

  // Handle clicks
  function clickHandler(event) {
    var amount;
    
    // Is the click on an input element?
    if (event.target && event.target.tagName.toUpperCase() === "INPUT") {
      // Obtain the input value as a number
      amount = +event.target.value;
      
      // Add it to the total value
      value += amount;
      
      // Display the result
      form.Numbers.value = value;
    }
  }
})();

<form name="Calc">
<input type="text" name="Numbers" size="16"><BR>
<input type="button" value="  5  ">
<input type="button" value="  10  ">
<input type="button" value="  20  ">
<input type="button" value="  30  ">
<input type="button" value="  50  ">
</form>

The above code may seem verbose due to the explanatory comments included.

Answer 3

Answer №2

Here is a basic demonstration. Since there was no provided JavaScript, I included my own:

window.Calc = {
  Numbers: {
    value: 0
  }
};

document.onclick = function () {
  document.getElementById('display').value = Calc.Numbers.value;
}

<form name="Calc">
  <input id="display" type="text" name="Numbers" size="16">
  <BR>
  <input type="button" value="5"  onclick="window.Calc.Numbers.value  += 5"/>
  <input type="button" value="10" onclick="window.Calc.Numbers.value += 10"/>
  <input type="button" value="20" onclick="window.Calc.Numbers.value += 20"/>
  <input type="button" value="30" onclick="window.Calc.Numbers.value += 30"/>
  <input type="button" value="50" onclick="window.Calc.Numbers.value += 50"/>
</form>

Reasoning

In JavaScript, there are Strings and Numbers. Strings cannot be directly added. By removing the quotes, the additions should function correctly.

Preferred Approach

I suggest avoiding inline JavaScript. Take a look at this demo, it simplifies the process of adding new numbers.

Fiddle

Answer 4

Here is a basic demonstration. Since there was no provided JavaScript, I included my own:

window.Calc = {
  Numbers: {
    value: 0
  }
};

document.onclick = function () {
  document.getElementById('display').value = Calc.Numbers.value;
}

<form name="Calc">
  <input id="display" type="text" name="Numbers" size="16">
  <BR>
  <input type="button" value="5"  onclick="window.Calc.Numbers.value  += 5"/>
  <input type="button" value="10" onclick="window.Calc.Numbers.value += 10"/>
  <input type="button" value="20" onclick="window.Calc.Numbers.value += 20"/>
  <input type="button" value="30" onclick="window.Calc.Numbers.value += 30"/>
  <input type="button" value="50" onclick="window.Calc.Numbers.value += 50"/>
</form>

Reasoning

In JavaScript, there are Strings and Numbers. Strings cannot be directly added. By removing the quotes, the additions should function correctly.

Preferred Approach

I suggest avoiding inline JavaScript. Take a look at this demo, it simplifies the process of adding new numbers.

Creating a custom calculator using Javascript

Answer №1

Answer №2

Reasoning

Preferred Approach

Fiddle

Similar questions

Attempting to access a variable from outside the function

Dividing the logic from the Express router while retaining the ability to utilize Express functionalities

"Enhanced interactivity: Hover effects and selection states on an image map

Generating grid-style buttons dynamically using jQuery Mobile

Encountering an error while attempting to load the jQuery script: TypeError - $.fn.appear.run is not a

Node.js and MongoDB integration for implementing like and dislike buttons

Utilizing Browserify routes and configuring Webstorm

Executing a function within the same file is referred to as intra-file testing

Utilize Meteor and Mongo to access a nested array object in a template with spacebars

Would you prefer to generate fresh HTML using JavaScript or dynamically load an existing HTML layout using AJAX?

Ways to store data in the localStorage directly from a server

Issue with the demo code for Vue Stripe Checkout

Navigating with Link in React Router DOM v5 to successfully pass and catch data

Ways to smoothly conclude a loading animation in real-time

Importing a JavaScript file into another JavaScript file as text in React Native can be a convenient way

Steps to creating an elliptical border using CSS

Populating a Listview in jqueryMobile with dynamic elements

Mastering parameter passing in Node.js functions: A comprehensive guide

The operation to set a nickname in Discord.js was unsuccessful due to insufficient permissions

Using OPTIONS instead of GET for fetching Backbone JS model data