The CE button on the calculator seems to be malfunctioning

My calculator's CE button isn't working as expected – instead of deleting the last entered number, it clears all numbers. I want the CE button to only delete the last number entered. Additionally, I want the calculator to display a default value of 0 when it loads, replacing the 0 with any number that is entered.

<html>
        <head>
        <title>Calculator
        </title>
        <link rel="stylesheet" href="index.css">
        </head>
        <body>
        <center>
        
        <form name="calculator">
        <div style=" width: 200px;height: 250px;border: 1px solid #D0CECE;">
        
        <table  style="margin-top:20px;">
        <tr>
        <td>
        <input name="displayresult"  id="display" class="cal-input" disabled >
        </td>
        </tr>
        </table>
        <table border="0px" cellspacing="10px" style="margin-top:5px;">
        
        <tr>
        <td name="left" value="(" onclick="calculator.display.value += '('" class="cal-top">(</td>
        <td name="right" value=")" onclick="calculator.display.value += ')'" class="cal-top"> )</td>
        <td class="operator cal-top" name="percent" value="%" onclick="calculator.display.value += '%'">%</td>
        <td id="clear" name="clear" value="c" onclick="calculator.display.value = ''" class="cal-top">CE</td>
        
        </tr>
        
        <tr>
        <td name="seven" value="7" onclick="calculator.display.value += '7'" class="cal-number">7</td>
        <td name="eight" value="8" onclick="calculator.display.value += '8'" class="cal-number">8</td>
        <td name="nine" value="9" onclick="calculator.display.value += '9'" class="cal-number">9</td>
        <td class="operator cal-top" name="div" value="/" onclick="calculator.display.value += '/'">/</td>
        </tr>
        
        <tr>
        <td name="four" value="4" onclick="calculator.display.value += '4'" class="cal-number">4</td>
        <td name="five" value="5" onclick="calculator.display.value += '5'" class="cal-number">5</td>
        <td name="six" value="6" onclick="calculator.display.value += '6'" class="cal-number">6</td>
        <td class="operator cal-top" name="times" value="*" onclick="calculator.display.value += '*'">*</td>
        </tr>
        
        <tr>
        <td name="one" value="1" onclick="calculator.display.value += '1'" class="cal-number">1</td>
        <td name="two" value="2" onclick="calculator.display.value += '2'" class="cal-number">2</td>
        <td name="three" value="3" onclick="calculator.display.value += '3'" class="cal-number">3</td>
        <td class="operator cal-top" name="minus" value="-" onclick="calculator.display.value += '-'">-</td>
        </tr>
        
        <tr>
        <td name="zero" value="0" onclick="calculator.display.value += '0'" class="cal-number">0</td>
        <td name="decimal" value="." onclick="calculator.display.value += '.'" class="cal-number">.</td>
        <td name="result" value="=" onclick="calculator.display.value = eval(calculator.display.value)" class="cal-result"><b>=</b></td>
        <td class="operator cal-top" name="plus" value="+" onclick="calculator.display.value += '+'">+</td>
        </tr>
        
        </table>
        </div>
        </form>
        
        
        </center>
        </body>
        </head>
        </html>

javascripthtmlcss

Answer №1

Modify the CE button onclick function to:

onclick="substring = calculator.display.value.slice(0, -1); calculator.display.value = substring;"

This code snippet fetches the current value displayed on the calculator, removes the last character from it, assigns it to a variable called substring, and then updates the display with the modified value.

Next, include placeholder="0" attribute in the <input> tag that showcases the calculator output:

<input name="displayresult" id="display" class="cal-input" placeholder="0" disabled>

By adding the placeholder attribute, the input field will show '0' when empty, and the placeholder will disappear as characters are entered.

<html>

<head>
  <title>Calculator</title>
  <link rel="stylesheet" href="index.css">
</head>

<body>
  <center>

    <form name="calculator">
      <div style=" width: 200px;height: 250px;border: 1px solid #D0CECE;">

        <table style="margin-top:20px;">
          <tr>
            <td>
              <input name="displayresult" id="display" class="cal-input" placeholder="0" disabled>
            </td>
          </tr>
        </table>
        <table border="0px" cellspacing="10px" style="margin-top:5px;">

          <tr>
            <td name="left" value="(" onclick="calculator.display.value += '('" class="cal-top">(</td>
            <td name="right" value=")" onclick="calculator.display.value += ')'" class="cal-top">)</td>
            <td class="operator cal-top" name="percent" value="%" onclick="calculator.display.value += '%'">%</td>
            <td id="clear" name="clear" value="c" onclick="substring = calculator.display.value.slice(0, -1); calculator.display.value = substring;" class="cal-top">CE</td>

          </tr>

          <tr>
            <td name="seven" value="7" onclick="calculator.display.value += '7'" class="cal-number">7</td>
            <td name="eight" value="8" onclick="calculator.display.value += '8'" class="cal-number">8</td>
            <td name="nine" value="9" onclick="calculator.display.value += '9'" class="cal-number">9</td>
            <td class="operator cal-top" name="div" value="/" onclick="calculator.display.value += '/'">/</td>
          </tr>

          <tr>
            <td name="four" value="4" onclick="calculator.display.value += '4'" class="cal-number">4</td>
            <td name="five" value="5" onclick="calculator.display.value += '5'" class="cal-number">5</td>
            <td name="six" value="6" onclick="calculator.display.value += '6'" class="cal-number">6</td>
            <td class="operator cal-top" name="times" value="*" onclick="calculator.display.value += '*'">*</td>
          </tr>

          <tr>
            <td name="one" value="1" onclick="calculator.display.value += '1'" class="cal-number">1</td>
            <td name="two" value="2" onclick="calculator.display.value += '2'" class="cal-number">2</td>
            <td name="three" value="3" onclick="calculator.display.value += '3'" class="cal-number">3</td>
            <td class="operator cal-top" name="minus" value="-" onclick="calculator.display.value += '-'">-</td>
          </tr>

          <tr>
            <td name="zero" value="0" onclick="calculator.display.value += '0'" class="cal-number">0</td>
            <td name="decimal" value="." onclick="calculator.display.value += '.'" class="cal-number">.</td>
            <td name="result" value="=" onclick="calculator.display.value = eval(calculator.display.value)" class="cal-result"><b>=</b></td>
            <td class="operator cal-top" name="plus" value="+" onclick="calculator.display.value += '+'">+</td>
          </tr>

        </table>
      </div>
    </form>


  </center>
</body>
</html>

Answer №2

Utilize basic arithmetic to simplify calculations. Divide and multiply by 10. For Clear Entry: Divide the number by 10 and return the whole number. Example: If you entered 103 and then click on CE. now 103/10 = 10(as a whole number). For Zero Replacement: Similarly, you can use the reverse logic to replace the default zero with a pressed number. Example: If it shows 0 at first and then you press 2. 0(original value) * 10 + 2(new key pressed) = 2 then if you press 6 2(original value) * 10 + 6(new key pressed) = 26

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

I am attempting to create a password validation system without the need for a database, using only a single

Help Needed: Trying to Create a Password Validation Website <script language="Javascript"> function checkPassword(x){ if (x == "HI"){ alert("Just Press Ok to Continue..."); } else { alert("Nope... not gonna happen"); } } ...

javascript

Perform bulk updates to various rows and columns based on their individual IDs within a Microsoft SQL Server

After extracting data from the database in Excel format using an SQL join query, I made modifications to some columns in the Excel sheet. Now, I need to update the modified data back into the database using the respective row IDs. However, when I try to it ...

javascriptnode.jssql-server

"Discover the step-by-step process for displaying the menu on a WordPress

After installing the new classifieds theme on my Wordpress website, I noticed that the menu from the previous theme is still showing up. However, when I hover over the menu, it disappears and only reappears once my cursor is no longer hovering over it. ...

phphtmlcsswordpress

Slow rotation in CSS styling

.badge { -webkit-transform-style: preserve-3d; -webkit-perspective: 1000; position: relative; } .back, .front { position: absolute; -webkit-backface-visibility: hidden; -webkit-transition: -webkit-transform 1s ease-in; width: ...

animationcssrotationflip

Choose the option from the jQuery dropdown list based on the displayed text instead of the value

In continuation of my previous question on jQuery getting values from multiple selects together, I am working with a select list like this: <select name="access" class="change" id="staff_off" runat="server"> <option value="8192">Off< ...

javascriptjqueryasp.net

Is there a way to modify the document title using .ready()?

As I work with nested layouts in Ruby on Rails, one particular layout requires me to extract a string from a div and use it as the title of the document. What is the proper method (if there is one) to accomplish this task? <script type="text/javascri ...

javascriptjqueryruby-on-rails

What is the best way to pass a custom HTTP header to a Node.js server?

One of my current challenges involves utilizing jQuery to include a custom header in each AJAX request. $.ajaxSetup({ beforeSend: function (xhr) { xhr.setRequestHeader ("Authorization", "Basic " + btoa(user + ":" + sessionID)); }, }); My ...

javascriptnode.jsajaxhttpheader

Preventing the display of AngularJS HTML tags while the app is being loaded

I am new to AngularJS (using version 1.5.8) and I am currently following the tutorials provided on docs.angularjs.org/tutorial. Below is the HTML code snippet: <div class="jumbotron"> <h1>{{application_name | uppercase }}</h1> ...

javascripthtmlangularjs

Creating intricate JavaScript objects for JSON API integration can be accomplished by following these steps:

Here is a sample JSON structure used for querying an API: "order_items": [ { "menu_item_id": "VD1PIEBIIG", "menu_item_name": "Create Your Own", "modifiers": [ { "modifier_id ...

javascriptjsonapi

jQuery: changing the order of list elements with the eq method

I've been tackling a challenge with designing a navigation bar that consists of 3 items. The goal is to have the clicked item move to the center position on the horizontal navbar while re-arranging the order. Here's the code snippet I've com ...

javascriptjqueryif-statementhtml-lists

Using Node's Express bodyParser() to access a JSON string that has been parsed

Question: How can I retrieve the parsed JSON object from the server side? I have successfully sent a JSON string to the server, but I am having trouble accessing the object once it is parsed. The client-side script for sending the JSON data is as follows ...

javascriptajaxjsonnode.jsexpress

Nextjs google places autocomplete not providing accurate suggestions

I'm attempting to utilize Google autocomplete to retrieve the names of mosques specifically in the United Kingdom. However, the data I am receiving is global and not limited to mosques. Here is my code: import axios from "axios"; export def ...

javascriptgoogle-mapsnext.jsaxioscors

React.js TypeScript Error: Property 'toLowerCase' cannot be used on type 'never'

In my ReactJS project with TSX, I encountered an issue while trying to filter data using multiple key values. The main component Cards.tsx is the parent, and the child component is ShipmentCard.tsx. The error message I'm receiving is 'Property &a ...

javascriptreactjstypescripttypesreact-tsx

Utilizing Vue.js to merge data from a RESTful API

I am currently facing a challenge where I need to merge multiple API calls into a final object due to API consumption limits. Does anyone have any ideas on how I can combine several calls into the same final object? Below is an example of my code, where I ...

javascriptjsonvuejs2

The submit button click does not trigger the execution of ajax code

I'm faced with a challenge when trying to implement an ajax call in my form. My goal is to display a spinner on the screen to indicate that the form is processing and submitting information. However, it seems that the ajax call is not being triggered ...

jqueryhtmlajaxforms

The download attribute in HTML5 is functioning properly, however it is causing a redirection to

Is it possible to use the HTML5 download attribute with a URL without being redirected to a new page? Here is the code I am currently using: exportToPdf: function(e) { var link = document.createElement('a'); link.href = 'https://filegener ...

html

What is the best way to send requests to a GraphQL server within my Redux action?

I am looking to transition my React+Redux application from using rest-requests to graphql-requests in my actions. What is the easiest way to accomplish this change seamlessly? I have come across Apollo while researching, but I prefer a simpler method to i ...

javascriptnode.jsreactjsreduxgraphql

What is the best way to create a repeating Jquery loop in code?

Hey there! I've been working on creating a button that toggles the background color from white to yellow and back again using Jquery. However, I've hit a bit of a roadblock with implementing a loop function. If you'd like to take a look at m ...

jqueryhtmlcss

React Router Link Component Causing Page Malfunction

Recently, I delved into a personal project where I explored React and various packages. As I encountered an issue with the Link component in React Router, I tried to find solutions online without any luck. Let me clarify that I followed all installation st ...

javascripthtmlreactjsnpmreact-router

Delay Export of React Component Until After Request in Shopify App Development

Being a newbie in Shopify App Development, React, and Next.js, I may have a silly question. Currently, I am making a request to a website and using the response in the React component that I want to export/render. To avoid it being undefined, I need to wai ...

javascriptnode.jsreactjsnext.jsshopify