"Attempting to troubleshoot a calculator built with html, css, and js. I'm stumped as to what could

Question

"Attempting to troubleshoot a calculator built with html, css, and js. I'm stumped as to what could

After following a tutorial on YouTube, going over the code multiple times, and still experiencing issues with the calculator. Sometimes it works fine, other times certain buttons like (+, -, x, ⁄) don't function properly. I've provided the entire code below as I suspect the issue lies in the JavaScript section. I initially started with HTML, then moved on to CSS and finally JS.

let runningTotal = 0;
let buffer = 0;
let previousOperator;

const screen = document.querySelector('.screen');

function buttonClick(value){
    if (isNaN(value)){
        handleSymbol(value);       
    }else{
        handleNumber(value);
    }
    screen.innerText = buffer;
}

// Rest of JavaScript code goes here...

// More code snippets for CSS and HTML will follow...

Despite meticulously examining each line of code, the problem remains elusive.

javascript html css calculator

Answer 1

Answer №1

Upon reviewing the code, I came across a few issues:

The buffer variable is sometimes a number and sometimes a string. In the line:

buffer = buffer.substring(0, buffer.length - 1);

This results in an Uncaught TypeError, so it's recommended to always convert it to a string first like this:

buffer = buffer.toString().substring(0, buffer.length - 1);

There is an attempt to compare runningTotal to the string '0', when runningTotal is actually a number.

if (runningTotal === 0)

It is important to carefully consider the data types of all variables as it seems a bit confusing at the moment.

Answer 2

Upon reviewing the code, I came across a few issues:

The buffer variable is sometimes a number and sometimes a string. In the line:

buffer = buffer.substring(0, buffer.length - 1);

This results in an Uncaught TypeError, so it's recommended to always convert it to a string first like this:

buffer = buffer.toString().substring(0, buffer.length - 1);

There is an attempt to compare runningTotal to the string '0', when runningTotal is actually a number.

if (runningTotal === 0)

It is important to carefully consider the data types of all variables as it seems a bit confusing at the moment.

"Attempting to troubleshoot a calculator built with html, css, and js. I'm stumped as to what could

Answer №1

Similar questions

I would like to inquire about the process of accessing profile information on a website through the LinkedIn API

Is it possible to have a single listener for all events within the jQuery event namespace?

`<div>` element with a class of "button" that listens for

Create a pair of divs on your webpage that users can drag around using HTML5

Different approach for searching and modifying nested arrays within objects

arrange a collection within an array containing keys as strings

Inscribe latitude from marker onto input field

Using AJAX and React to handle RESTful requests

Leverage IBM Worklight to initiate iOS native code execution upon plugin creation

When you scroll a fixed element on the page, the block is truncated

Utilize jQuery and HTML simplistically to display or conceal divs throughout a webpage

Incorrect outcome when utilizing ajax to update a div within a for each loop

Where is the function returned by redux-thunk invoked?

Setting the height of columns in a Bootstrap panel to 100%

Updating visual appearance with button clicks and unclicks

Executing React's useEffect hook twice

Renaming and destructuring of an array's length using ReactJS

Background image not displaying

Comparison of single-line and multi-line CSS styles placement

Ways to ensure that the $http.post api call waits for the response to be fully prepared