Issues with 'Backspace' and 'Clear' buttons on HTML calculator preventing proper function in JavaScript

Hello everyone! I've recently started working on a pure HTML/CSS/JS calculator project. While the HTML and CSS parts went smoothly, I'm facing some issues with getting the initial functions to work properly. Despite doing some research online, I can't seem to figure out what's causing the problem. So, here's the code snippet that might be relevant.

var oneBtn = document.getElementById('calc-one');
var twoBtn = document.getElementById('calc-two');
// More similar declarations follow...

@import url('https://fonts.googleapis.com/css?family=Roboto:100&display=swap');
body {
  font-family: 'Roboto', sans-serif;
}
// More CSS styling goes here...

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>

  <h1>Pure HTML/CSS/JS Calculator</h1>
  // Relevant HTML structure for the calculator display
</body>

javascripthtmlcsscalculator

Answer №1

If you switch to using onclick instead of onClick – with a lowercase c in onclick – your problem should be resolved.

Answer №2

To solve the issue, simply replace backspaceBtn.onClick with 

backspaceBtn.addEventListener("click", function () {
. I have set up a fiddle to demonstrate this for you, accessible here.

Answer №3

When starting out with ES6, it's important to include "Use Strict" at the beginning of your script.

Next, make sure that the script is executed after the DOM has fully loaded to avoid issues with undefined elements like getElementById if they are not yet rendered.

Also, double check for any typos such as btnBackspace.onclick, which worked in my test using Firefox.

Lastly, don't forget to include the necessary HTML tags, as it could be causing a discrepancy between browsers.

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

Is it possible to determine if a web page is designed for a personal computer or a

Is there a way to identify whether a given URL is intended for PC or mobile devices? I have a collection of URLs, and I need to determine if each one corresponds to a PC or mobile version. Is there any specific HTML element or marker within the page sour ...

htmlweb-crawlerrd

Angular 4 application encountering 'Access-Control-Allow-Origin' issue

Attempting to reach the following URL: Manually accessing works without issue. However, trying to access via an Angular 4 request results in: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://loca ...

javascriptangularxmlhttprequestcors

jQuery - translating and organizing names of countries

I have implemented a jQuery function to organize a list of country names based on the user's selected language code (via a language select dropdown). You can find more information on this topic in this related post. The translation of country names s ...

javascriptjqueryhtmlsorting

What is the best way to retrieve state within a property of a React class component?

I have encountered an issue with a React Class Component where I am trying to separate a part of the rendered JSX but unable to access the Component's state within the separated JSX as a property of the class. The scenario is quite similar to the fol ...

javascriptreactjs

Mastering advanced authentication with Passport and the JwtStrategy

During a recent project I downloaded from the internet... In one specific part of the code, the following is implemented: passport.use(new JwtStrategy({ secretOrKey: credentials.secret, jwtFromRequest: ExtractJwt.fromAuthHeader(), }, ...

javascriptnode.jsexpresspassport.jspassport-local

Can a universal Save File As button be created for all web browsers?

Currently, I am in the process of developing a music player on the client side and I am seeking a method to save playlists that include mp3 data. Concerns with localStorage The restriction of a 5mb limit for localStorage makes it impractical for my needs. ...

javascripthtmlstoragepersistent

PHP must be loaded before Javascript code will be executed

I am in the process of creating a high-tech "smart home" webpage, but I am facing an issue with the code execution order. Despite trying to use sleep() and other tactics, I can't seem to display the success message before running the script that reboo ...

javascriptphphtmlcss

extract the chosen option from the dropdown menu using AngularJS and input it into a text field

Hello! I am a beginner in AngularJS and currently working on creating a unit converter demo app. My app consists of two dropdowns for selecting the source and destination units. I need help in getting the selected values from the dropdowns into an input fi ...

javascripthtmlangularjs

CSS media queries going unnoticed

I'm struggling to make my page look nice on both iphone4 and iphone 5. Despite writing some media queries, they don't seem to be taking effect: @media only screen and (max-device-width: 480px) { #gpsMain{ position:absolute; top:25px; ...

cssmedia-queries

Tips for discovering the index value of a two-dimensional array in JavaScript

I am working with a 2D array that is structured as follows: var numbers=[[1,2,3,4,5],[6,2,3,5,5],[9,8,3,4,9]] Is there a way to determine the index value of elements in this two dimensional array? ...

javascriptarrays

When I try to reverse the words in a string, I am not receiving the desired order

Currently delving into TypeScript, I have set myself the task of crafting a function that takes in a string parameter and reverses each word within the string. Here is what I aim to achieve with my output: "This is an example!" ==> "sihT ...

javascriptstringtypescriptloopsfor-loop

Mastering the Art of JSON Conversion for AngularJS

Is there a way to transform the following JSON data structure [{"categories":[{"id":"171","name":"Fashion"},{"id":"219","name":"Blog"}]}] into this format? [{"id":"171","name":"Fashion"},{"id":"219","name":"Blog"}] This change is necessary for proper ...

javascriptjsonangularjs

The issue of Angular curly braces malfunctioning in some simple code examples reversed my

<head> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"> </script> </head> <body style="padding: 20px 20pc;"> <div ng-app="app"> ...

javascriptangularjs

Centralized spinner within the modal, not the web page

In my Bootstrap modal, I have a button that triggers the appearance of a spinner. However, the spinner is currently centered within the modal itself. This means that if I scroll the modal, the spinner also moves along with it. My goal is to have the spinne ...

htmlcssbootstrap-4bootstrap-modal

Obtain product JSON using a product ID on Shopify

Looking to retrieve individual product JSON data based on the product ID https://testbydisnap.myshopify.com/products.json?product_id=10282991814 OR https://testbydisnap.myshopify.com/products/drummer-tshirt.js replace with https://testbydisnap.myshopi ...

javascriptajaxshopify

Best practice for integrating Typescript into an established ASP.NET 4 Webforms project

Currently, I am working on an older asp.net 4.0 Webforms project using Visual Studio 2015. My goal is to transition from using Javascript to TypeScript for certain client side code tasks. While I have experience using TypeScript in projects outside of Vis ...

javascriptasp.netvisual-studiotypescript

Changing the click event using jQuery

My JavaScript snippet is displaying a widget on my page, but the links it generates are causing some issues. The links look like this: <a href="#" onclick="somefunction()">Link</a> When these links are clicked, the browser jumps to the top of ...

javascriptjqueryhtml

What could be causing my file input to appear misaligned?

Can anyone assist me with a strange issue I am facing? Despite using inspect element on my file input and it appearing in the correct place, it does not function as expected. To see for yourself, visit oceankarma.co and click on 'Post' at the top ...

htmlcssfileinput

How to Specify ContentType for a New Window in JavaScript after Submitting MVC Form

When a link is clicked, I want to open a new window with content determined by a post to my MVC controller. Here's how I currently approach it: jQuery.ajax({ type: "POST", url: '/controller/mycontroller', data: { myd ...

javascriptajaxmodel-view-controllerasp.net-mvc-3contenttype

Argument contains an invalid left-hand side - Reference error

Currently, I have a straightforward JavaScript function in which I iterate over a series. After that, I add a value to an array and then assign it to an object. This process is part of my work on creating a c3 combination chart. However, I encountered an ...

javascriptarraysobjectc3.js