Calculator built with HTML, CSS, and JavaScript

Hi there, I'm experiencing some issues with my calculator. The buttons seem to be working fine and lining up correctly, but for some reason, nothing is showing up on the monitor or getting calculated when I press the buttons. Here's the code that I've used - can anyone help me identify where I might have gone wrong? My gut feeling is that it has something to do with the true/false condition, but I can't seem to pin it down.

Below is the HTML code snippet:

<body>
<table>
<tr>
  <input id="display" type="text" value="0"/><span id="currOp"></span>
<tr>
  <td>
    <button id="7" class="num">7</button>
  </td>
  <td>
    <button id="8" class="num">8</button>
  </td>
  <td>
    <button id="9" class="num">9</button>
  </td>
  <td>
    <button id="plus" class="operator">+</button>
  </td>
  <td>
    <button id="clear">C</button>
  </td>
</tr>  
<!-- rest of the HTML code goes here -->

Next, let's take a look at the CSS styling used in the project:

button {
  height: 40px;
  width: 40px;
  font-size: 110%;
}
 #display{
font-size: 120%;
text-align: right;
}
span {
  font-size: 150%;
}

And finally, the JavaScript code snippet responsible for handling the calculator functionality:

    var isOperating = true;
    var isfloating = false;
    var toBeCleared = true;
    var operator;
    var operand;
    var display;

    // remaining of JavaScript code goes here

Answer №1

Make sure to assign clearFlag = false;

if (currentValue === "0" || clearFlag) {
  clearFlag = false; 
  screen.value(clickedNumber);
  } else {
   screen.value(currentValue + clickedNumber);
  }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Display event using Angular

I am currently working on an Angular project where I need to print a specific area of the page. While I know that this can be done using media CSS, it is causing issues for me due to the numerous print functionalities present in the project. I am attemptin ...

.htaccess rule cannot process dots in the file names

I've encountered an issue with my htaccess rules. Here is the rule I have in my htaccess file: RewriteEngine On RewriteRule ^u/([a-z-0-9-_]+)$ user.php?id=$1 Everything works smoothly, except when I include a dot (.) in the username. The browser the ...

Assign a class to the initial element of the Vuetify v-select module

Hey there! Currently, I'm utilizing the v-select component from Vuetify. I'm looking to customize the appearance of the first item in the v-select component by adding a specific class. For example, I want the text of the first entry "Item A" to b ...

Javascript editing enhancement for real-time changes

Are there any tools for in-place editing of Javascript code? I'm looking for something similar to Firebug, which is great for instant CSS editing and previewing but doesn't have the capability to edit JavaScript directly. Is there a tool or addon ...

Creating unique page styles using global styles in Next.js

I am facing a dilemma in my NextJS app. On the /home page, I need to hide the x and y overflow, while on the /books page, I want the user to be able to scroll freely. The issue is that Next only allows for one global stylesheet and using global CSS selec ...

Resetting the width of a CSS-styled div to its default maximum width

I have a set of automatically generated div containers that contain label and data information. For example: <div class="display-label"> @Html.DisplayNameFor(model => model.BusinessPhone) </div> <div class="display-field"> @H ...

Set a class for the nth table row

I'm trying to find a solution using jQuery where I can assign different classes to each <tr> in a table. For the first row, I want to add class='alt', for the second row class='alt-2', and for the third row class='alt-3& ...

The website flickers in and out as it loads

My site keeps flashing whenever it loads. Despite trying the solutions recommended in this stackoverflow post, I have had no success. Every page on my website loads a nav.html file using this code: $.get("nav.html", function(data){     $("#nav-placeho ...

I'm having trouble getting my Ajax edit code to function correctly. Can anyone offer some assistance?

I am currently working on a basic registration system that includes two forms: one for registration and another for selecting a city. I have encountered an issue where newly added cities update perfectly, but when trying to use the selected city in the reg ...

Adding specific tag attributes to user input in PHP

When accepting user input for a post, I want to allow users to include <a href=""></a> tags. However, I need to insert a class like <a class="user" href=""></a> if any <a> tag is included in the post before saving it to the da ...

Ensuring validation with Javascript upon submitting a form

Hey there, I'm looking to validate field values before submitting a form. Here's the code I have: <table width="600" border="0" align="left"> <tr> <script type="text/javascript"> function previewPrint() { var RegNumber = docum ...

Determine the location based on the preceding parameter of $routeChangeError using AngularJS

I am currently monitoring events of the type $routeChangeError within a run block in my application. $rootScope.$on("$routeChangeError", function (event, current, previous, rejection) { if (!!previous) { console.log(previous); $locati ...

Unable to stop page refresh following form submission or file upload

Is it possible to upload a photo with Ajax to Express and have the response generate desired HTML? Whenever I submit the form, it redirects me and displays the picture data as an object. Here's the Express code: const storage = multer.diskStorage({ ...

Executing a function from another reducer using React and redux

My application consists of two main components: the Market and the Status. The Status component manages the user's money, while the Market component contains buttons for purchasing items. My goal is to decrement the user's money when a button in ...

Difficulty in implementing Handlebars handler for dropdown onchange event

Currently, I am implementing Express alongside Handlebars for the front-end of my project. My aim is to trigger an event and read the value of the selected option in the dropdown within 'home.handlebars' when it changes, through 'index.js&ap ...

Is there a advantage to using Angular's component style encapsulation for improved performance?

Recently, I came across the styling methods of Angular 2 which allows you to directly include your styles within the component. If you want to explore more on this topic, check out loading styles. There are two options for style encapsulation in Angular 2 ...

Issue with button events not being triggered while working with dynamically created classes

I am facing an issue with three plus (+) buttons that are next to three separate tables built using DataTables. The problem arises because all the plus buttons were created in one location with DataTables, resulting in them being assigned the same classes ...

Attempting to generate printed documents with multiple components spread across individual pages using react-to-print

I am working with the react-to-print library and I have a requirement to print a list of components, with each component on its own separate page. However, when I click on the print button, I encounter an error stating that the argument does not appear to ...

Utilizing JQuery Template to Invoke JavaScript Functions

If I have the following JSON object structure: ITEMS is an array with one element, and FILTER is another array with 3 items in it. Description: "churches with some restrictions" ITEMS: {...} [0]: {...} FILTER: {...} ...

The useEffect function is failing to execute, leading to an issue with an undefined variable

Attempting to retrieve a specific string with the help of useRouter, then utilizing that same string to access a particular document from Firebase is my current goal. This sequence of actions is supposed to take place within the confines of the useEffect f ...