The HTML calculator is failing to show any output

My HTML calculator is facing issues with displaying input and results. I want to maintain the existing layout and design of the calculator while fixing this problem. The calculator was created using only HTML code to keep it simple for integration into an existing website. Despite my attempts to troubleshoot using JavaScript, jQuery, and debugging tools, I have not been able to identify the root cause.

Code snippet for the HTML calculator:


        body {
            background-color: #FFFFFF;
            background-size: 1500px;
        }

        ...

        </form>
    </div>

</body>
javascripthtmlcsscalculator

Answer №1

Initially, the code mentioned onClick, however, it should be written as onclick since it is case-sensitive.

Furthermore, the statement document.calculator.ans.value is incorrect and will not function properly. The correct approach is to use ans.value only, which should resolve the issue.

Below, you can find the HTML code for a calculator that will display the desired output (and it works)

body {
  background-color: #FFFFFF;
  background-size: 1500px;
}

#calculator {
  width: 250px;
  height: 375px;
  text-align: center;
  margin: 90px auto;
  box-shadow: 10px 10px 10px #010012;
  background-color: #229EE2;
  background-size: 7px;
  border-radius: 30px;
  border: 3px solid #595959;
}

#display {
  margin: 30px 0 20px 0;
  padding-right: 2%;
  width: 220px;
  height: 30px;
  border-radius: 4px;
  box-shadow: 0px 0px 3px #595959;
  text-align: right;
  font: 27px bold;
  color: #1A3C67;
  background-color: #78c4ed;
}

#keys {
  width: 43px;
  height: 35px;
  margin-left: 10px;
  margin-bottom: 20px;
  box-shadow: 0px 0px 15px #010012;
  cursor: pointer;
  font-style: italic;
  color: lightblue;
  background-color: rgb(0, 50, 68);
  font-weight: bold;
  font-size: 24px;
  border-radius: 4px;
}

#keys:hover {
  background: #1998cd;
  font-weight: bold;
  color: #1e185e;
}

#keysC {
  width: 43px;
  height: 35px;
  margin-left: 10px;
  margin-bottom: 20px;
  box-shadow: 0px 0px 10px #595959;
  cursor: pointer;
  font-style: italic;
  color: #1A3C67;
  background-color: lightblue;
  font-weight: bold;
  font-size: 16px;
  border-radius: 4px;
}

#keysC:hover {
  background: #7caad0;
  font-weight: bold;
  color: #1A3C67;
}
    <!DOCTYPE html>
    <html>

    <head>
      <title>Financial Calculator</title>
      <link rel="stylesheet" type="text/css" href="style123.css">
    </head>

      <body>
        <div id="calculator">
        <div class="fluid-container">
          <form name="Financial Calculator">
            <input type="text" id="display" name="ans" value="" class="form-control" placeholder="">
            <br>
            <div class="row">
              <div>
                <input type="reset" id="keysC" value="C">
                <input type="reset" id="keysC" value="CE">
                <input type="button" id="keysC" value="<--">
                <input type="button" id="keysC" value="%" onclick="ans.value+='%'">
              </div>
            </div>
            <br>
            <input type="button" id="keys" value="7" onclick="ans.value+='7'">
            <input type="button" id="keys" value="8" onclick="ans.value+='8'">
            <input type="button" id="keys" value="9" onclick="ans.value+='9'">
            <input type="button" id="keysC" value="/" onclick="ans.value+='/'">
            <br>
            <input type="button" id="keys" value="4" onclick="ans.value+='4'">
            <input type="button" id="keys" value="5" onclick="ans.value+='5'">
            <input type="button" id="keys" value="6" onclick="ans.value+='6'">
            <input type="button" id="keysC" value="*" onclick="ans.value+='*'">
            <br>
            <input type="button" id="keys" value="1" onclick="ans.value+='1'">
            <input type="button" id="keys" value="2" onclick="ans.value+='2'">
            <input type="button" id="keys" value="3" onclick="ans.value+='3'">
            <input type="button" id="keysC" value="-" onclick="ans.value+='-'">
            <br>
            <input type="button" id="keys" value="0" onclick="ans.value+='0'">
            <input type="button" id="keys" value="." onclick="ans.value+='.'">
            <input type="button" id="keys" value="=" onclick="ans.value=eval(ans.value)">
            <input type="button" id="keysC" value="+" onclick="ans.value+='+'">
          </form>
        </div>
      </div>
    </body>

    </html>

Answer №2

Each HTML id must be unique, so you cannot have multiple elements with the same id="key". To resolve this issue, consider switching all instances of id to class. Remember to adjust the CSS selectors accordingly!

onclick (note the lowercase letters) should point to a function. One simple approach is to define a function using a <script> tag and then invoke it in the onclick attribute of the button.

For example:

<script>
  function keyOnClick(symbol) {
    document.getElementById('display').value += symbol
  }
</script>
<input type="button" class="key" value="7" onclick="keyOnCick(this.value)">

Answer №3

Welcome to the Simple Calculator!

#calc
{
    width:300px;height:250px;background-color: pink; color: black;
}
#btn
{
    width:100%;height:40px;font-size:20px;width: 40px;background-color: blue; padding-right: 10px
}
form Name="calc">
<table id="calc" border=2>
<tr>
<td colspan=5><input style="width:300px; height: 40px; font-size: 20px " name="display" onkeypress="return event.charCode >= 48 && event.charCode <= 57" type="text"></td>
<td style="display:none"><input name="M" type="number"></td>
</tr>
<tr>
<td><input id="btn" type=button value="MC" OnClick="calc.M.value=''"></td>
<td><input id="btn" type=button value="0" OnClick="calc.display.value+='0'"></td>
<td><input id="btn" type=button value="1" OnClick="calc.display.value+='1'"></td>
<td><input id="btn" type=button value="2" OnClick="calc.display.value+='2'"></td>
<td><input id="btn" type=button value="+" OnClick="calc.display.value+='+'"></td>
</tr>
<tr>
<td><input id="btn" type=button value="MS" OnClick="calc.M.value=calc.display.value"></td>
<td><input id="btn" type=button value="3" OnClick="calc.display.value+='3'"></td>
<td><input id="btn" type=button value="4" OnClick="calc.display.value+='4'"></td>
<td><input id="btn" type=button value="5" OnClick="calc.display.value+='5'"></td>
<td><input id="btn" type=button value="-" OnClick="calc.display.value+='-'"></td>
</tr>
<tr>
<td><input id="btn" type=button value="MR" OnClick="calc.display.value=calc.M.value"></td>
<td><input id="btn" type=button value="6" OnClick="calc.display.value+='6'"></td>
<td><input id="btn" type=button value="7" OnClick="calc.display.value+='7'"></td>
<td><input id="btn" type=button value="8" OnClick="calc.display.value+='8'"></td>
<td><input id="btn" type=button value="x" OnClick="calc.display.value+='*'"></td>
</tr>
<tr>
<td><input id="btn" type=button value="M+" OnClick="calc.M.value=(Number(calc.M.value))+(Number(calc.display.value))"></td>
<td><input id="btn" type=button value="9" OnClick="calc.display.value+='9'"></td>
<td><input id="btn" type=button value="±" OnClick="calc.display.value=(calc.display.value==Math.abs(calc.display.value)?-(calc.display.value):Math.abs(calc.display.value))">
</td>
<td><input id="btn" type=button value="=" OnClick="calc.display.value=eval(calc.display.value)"></td>
<td><input id="btn" type=button value="÷" OnClick="calc.display.value+='/'"></td>
</tr>
<tr>
<td><input id="btn" type=button value="1/x" OnClick="calc.display.value=1/calc.display.value"></td>
<td><input id="btn" type=button value="." OnClick="calc.display.value+='.'"></td>
<td><input id="btn" type=button value="x2" OnClick="calc.display.value=Math.pow(calc.display.value,2)"></td>
<td><input id="btn" type=button value="√" OnClick="calc.display.value=Math.sqrt(calc.display.value)"></td>
<td><input id="btn" type=button value="C" OnClick="calc.display.value=''"></td>
</tr>
</table>
</form>

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

Session data in ExpressJS is not being stored in the cookie

There are plenty of questions on this topic, but unfortunately, I haven't found any answers that solve my issue. I'm using Chrome with ExpressJS and VueJs 3 to build a simple application where users can "login" and access another page. All I wan ...

javascriptnode.jsvue.jsexpress

What is the reason my Angular attribute is only updated when triggered by a postMessage() method from my iframe?

I am working on a project where I have an attribute named counter that needs to increment by 1 every time a button within an iframe is clicked. To see the code, you can visit: https://stackblitz.com/edit/angular-fznrnf?file=src/app/app.component.ts The c ...

javascriptangulariframerefreshparent

I'm curious about something as a beginner. Can you explain what **.config.js and **.vue.js files are? How do they differ from regular .js files

I have a simple question that I haven't been able to find the answer to through searching. I've come across files like vue.config.js generated by vue-cli, as well as files like Content.vue.js. At first, I assumed that after the period was the fi ...

javascriptvue.js

What is the best way to directly send a message from a panel to a page-mod's content script?

When working with a code snippet in a Firefox addon like the one below: var pagemod = PageMod({ include: ['*'], contentScriptFile: [data.url('content.js')] }); panel = require("sdk/panel").Panel({ width: 322, height: 427, ...

javascriptfirefox-addon-sdk

Can you navigate to HTML files using Vue router?

Hey there! I'm currently utilizing VueJS along with the webpack template. I've got a variety of components that I can easily showcase with Vue Router. However, the testing framework utilized by my team is Robot Framework and we typically create a ...

htmlvue.jsvue-componentrobotframeworkvue-router

Tips for coloring just the letters and excluding the Bengali Kar symbol

The Bengali language consists of 40 consonants, including ক, খ, গ, ঘ, ঙ, চ, ছ, জ, ঝ, ঞ, and more. Additionally, there are 10 vowels in the form of Kars, such as া, ি, ী, ু, ূ, ৃ, ে, ৈ, ো, and ৌ. My goal is to highli ...

htmlcssunicodediacriticsaccent-sensitive

Limit the utilization of ajax API to iOS and Android applications

Imagine a scenario where you have valuable data coming from an API (mysite.com/api/OooOOooData), and you need to ensure that access to it is limited to the designated iOS / Android app. It's crucial for the data to be connected to the correct advertis ...

javascriptandroidiosajaxcordova

PHP Pagination with AJAX and MySQL

I'm currently working on a website that functions as a forum, where posts are displayed dynamically using ajax. Upon user login, they encounter a 'orderby' dropdown selection, allowing them to choose the order of the posts. Select Menu < ...

javascriptphpmysqlajax

Select any menu option to return to the one-page layout and then scroll down to find the location

I'm wondering if there is a way to navigate back from an external page to a specific section on my one-page website with a fixed menu? On my one-pager website, I have a fixed menu that includes a "apply for a job" button. When clicked, it takes users ...

javascripthtmlcss

Guide to utilizing the Fetch API to send text/plain content

Attempting to utilize the Fetch() API for posting text/plain data: fetch('/test', { method: 'post', headers: { 'Content-Type': 'text/plain' }, body: "this is a test" }) .then(respon ...

javascriptnode.jsfetch-api

When a model is changed from within a jQuery event, Angular 2 fails to update the view

During the development process, I encountered an issue while creating a custom search panel that displayed search results in a dropdown container. In my controller, I defined the following: export class ProductSearchComponent implements OnInit { publ ...

javascriptjqueryangular

Incorporate Functionality into AngularJS Controller

Although I have experience with other MVC Frameworks, I am new to AngularJS and facing an issue. My controller is named "Projects" and the route is /projects. However, I want to be able to navigate to /projects/java where a new page template/view will be d ...

javascriptangularjs

Posting data to an HTML file with a foreign key matching the input value in Express.js

My discussion platform features topics and comments. Each comment has its own unique topic_id. Currently, I am able to post comments for the initial topic, but encountering issues when adding new comments for other topics. I am looking for guidance on effi ...

javascripthtmlnode.jsexpresssqlite

Adjust the background of the input range style prior to the thumb icon

Is there a way to style the bar before the thumb with a different color on a range input? I have been searching for a solution without much success. This is the desired look: https://i.sstatic.net/ZkTAB.png Unfortunately, Chrome no longer supports input[t ...

javascriptjqueryhtmlcssless

Adding a unique header to an Ajax CORS request can be achieved by following a few

Searching for a way to include a custom header for Ajax CORS request? Look no further! My server is PHP Lumen and the proxy server is Nginx. The file bootstrap/app.php holds my project configuration details https://i.sstatic.net/zxM7G.png I've come ...

javascriptphpjqueryajaxcors

What is the best way to center an HTML element between two other elements?

Kindly, take a look at this straightforward jsFiddle: http://jsfiddle.net/mark69_fnd/vtLrt/10/ HTML: <div class="char"> <div> <div class="char">A1</div> <div class="char anchorToMiddle">D1</div> <div c ...

javascripthtmlcss

Exposing the full binary in jQuery

Can anyone explain how jQuery can display the entire binary representation of a number without removing the leading zeros? Here is the code snippet: HTML: <input id="input" type="text" size="20"> <input id="result" type="text" size="30"> < ...

javascriptjqueryhtmlbinary

Issues with jQuery jGrowl functionality

I've been struggling to get the jGrowl feature working on my website. Despite setting up the CSS and JS correctly as shown below: <script type="text/javascript" src="<?php echo $base; ?>jgrowl/jgrowl.js"></script> <link type="tex ...

javascriptjqueryjgrowl

Angular appears to be having trouble with localStorage functionality

Having an issue with my service that interacts with a local NOTES object array using localStorage. Whenever the page refreshes, the previously entered data is lost and only the initial data in the const NOTES array remains. Can't seem to figure out wh ...

javascriptangularlocal-storageangular2-services

In the desktop view, padding, margins, and shadows mysteriously vanish, yet magically reappear when inspected. This bug stubbornly remains

Currently, I am working on a prototype portfolio site for a school project. My strength lies in the front end development area. Interestingly, when I check the site normally, there seems to be no padding or margin visible. However, upon using inspect eleme ...

htmlcsstwitter-bootstrapbootstrap-5