Exponential calculator in Javascript

I'm working on a basic calculator project using html5, css3 and javascript. However, I've run into an issue with the exponent button not functioning properly. Here's my code snippet:

<html>
<head>
<meta charset = "utf-8">
<title>Calculator</title>
<script type = "text/javascript">
    function result(){
        btn.value = eval(btn.value);
    }
</script>
<style type = "text/css">
  .box{
    height: 500px;
    width: 400px;
    background-color: red;
  }
  .display{
    background-color: green;
    position: relative;
    top:20px;
    left:50px;
    width:310px;
    height:60px;
  }
  .display input{
    color: black;
    background-color:yellow;
    position:relative;
    left:3px;
    top:3px;
    width:295px;
    height:45px;
  }
  .key{
    position:relative;
    top:15px;
    left:50px;
  }
  .button{
    width:55px;
    height:60px;
    margin-left:15px;
  }
  .button.gray{
    background-color:gray;
  }
  .button.black{
    color:white;
    background-color:black;
  }
</style>
</head>

<body>
<div class = "box">
    <div class = "display"><input type = "text" readonly size="20" id="btn"></div>
     <div class = "key">
    <p><input type = "button" class = "button gray" value = "1" onclick="btn.value+=1">
       <input type = "button" class = "button gray" value = "2" onclick="btn.value+=2">
       <input type = "button" class = "button gray" value = "3" onclick="btn.value+=3">
       <input type = "button" class = "button black" value = "+" onclick="btn.value+='+'"></p>
    <p><input type = "button" class = "button gray" value = "4" onclick="btn.value+=4">
       <input type = "button" class = "button gray" value = "5" onclick="btn.value+=5">
       <input type = "button" class = "button gray" value = "6" onclick="btn.value+=6">
       <input type = "button" class = "button black" value = "-" onclick="btn.value+='-'"></p>
    <p><input type = "button" class = "button gray" value = "7" onclick="btn.value+=7">
       <input type = "button" class = "button gray" value = "8" onclick="btn.value+=8">
       <input type = "button" class = "button gray" value = "9" onclick="btn.value+=9">
       <input type = "button" class = "button black" value = "*" onclick="btn.value+='*'"></p>
    <p><input type = "button" class = "button black" value = "%" onclick="btn.value+='%'">
       <input type = "button" class = "button gray" value = "0" onclick="btn.value+=0">
       <input type = "button" class = "button black" value = "^" onclick="btn.value+='^'">
       <input type = "button" class = "button black" value = "/" onclick="btn.value+='/'"></p>
    <p><input type = "button" class = "button black" value = "C" onclick="btn.value=''">
       <input type = "button" class = "button black" value = "=" onclick="result()";></p>
</div>
</div>

</body>
</html>

Answer ā„–1

Looking for a little entertainment? Check out this half-functional calculator! DEMO

In order to bring this calculator to life, you'll need to add a good amount of JavaScript code. Without it, the calculator won't perform any calculations.

Use JQuery's on method to capture button clicks.

$('.box').on('click','.button',function(){

Answer ā„–2

When it comes to handling actions performed by the client, a script such as JavaScript is essential. While HTML primarily serves as a markup language for displaying data and CSS is used for formatting and designing that markup, a script is necessary to manage actions.

In HTML, you can use an onclick attribute to call a JavaScript function and pass in the value of a button:

<p><input type = "button" class = "button gray" value = "1" onclick="showNum(this.value)">

The JavaScript function would take the input value, locate the input box by its ID using .getElementById(your id), and then display the input value:

function showNum (input) {
        var display = document.getElementById("btn");
        display.value = input; 
 }

If you'd like to see this in action, you can find a functional example on jsbin:

http://jsbin.com/xijatosate/1/edit?html,css,js,output

Answer ā„–3

Hey there, I've made some improvements to your code snippet.

function updateDisplay(value) {
    var displayElement = document.getElementById("output");
    displayElement.value += value;
} 

This template is a good starting point for your coding journey. I recommend checking out www.freecodecamp.org/ to learn more.

Enjoy exploring the world of coding!

Here's the full code on CodePen.

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

Navigating to the default landing page using basic authentication middleware in Express

I'm currently working on implementing basic authorization for an entire website using Express. The goal is to have users enter their credentials, and if correct, they will be directed to the standard landing page. If the credentials are incorrect, the ...

What could be causing my website to function flawlessly in Firefox but not in Chrome or Internet Explorer?

Hey everyone, I'm feeling lost and have been comparing files using DiffNow. I don't have any code to offer because I'm unsure of where to even begin. The website is coded in php/html/mysql/jquery. Here are my main concerns: -Animations are ...

The functionality for determining whether the value isset as 'Yes' or 'No' is not functioning properly in my PHP form

I'm currently working on creating a combined 'Order Calculator / Order Form' using one php form. The calculator part of the form is functioning perfectly and accurately calculates the total for all 5 order options both on the live page and i ...

Position the Material UI Box element to the bottom of its parent container

Hello there, I've come across the following layout: <Box width="100%" height="100%" p={1}> <Box my={1} display="flex" justifyContent="center"> </ ...

An SVG with a single enigmatic path/shape featuring a perplexing left margin or empty space. Not contained within an

I created a unique shape in Illustrator and adjusted the artboard to fit the shape perfectly, eliminating any excess white space. I double-checked this process to ensure accuracy. Upon opening the design in Chrome and inspecting it, I noticed that when ho ...

Switch between Light and Dark Modes effortlessly with just one button

I've created a code that effortlessly switches between light mode and dark mode with the press of buttons. However, I'm looking to combine these two functionalities into a single toggle button for ease of use. If anyone can provide insight on how ...

Converting primary key strings to BSON for the _id field in MongoDB using Mongoskin

The primary key in Mongodb is typically _id and its data type is bson. For example: {_id : "4e7020cb7cac81af7136236b"} I am interested in setting another field's value as the primary key. For instance: apple How can I convert the string "apple" to ...

I used npm to install AngularJS and then included AngularJS in my application

My goal is to set up AngularJS v1.5.x using npm and integrate it into my application for seamless utilization. Most tutorials opt for downloading the Angular Version from angularjs.org and manually adding it to the index.html within a <script></sc ...

What is the process of adding a unique model to three.js?

Despite trying numerous solutions to a common problem, I am still unable to import my 3D model in Three.js using the following code: <script src="https://threejs.org/build/three.min.js"></script> <script src="https://cdn.rawgi ...

Leverage Reveal.js within Next.js by installing it as an npm package

I am currently working on a project that requires integrating Reveal.js with Next.js. However, I am having trouble displaying the slides properly. Every time I try to display them, nothing shows up. Even after attempting to display some slides, I still en ...

What is the method for utilizing the variable from express in HTML?

Currently, I am working with Express and have the following code: app.get('/', requiresAuth(), (req, res) => res.sendFile('/db_auth_site/index.html', { title: 'Hey', message: 'Hello there!' }) ); I am trying ...

Navigate forward to the next available input in a grid by using the tab key

My goal is to improve form entry efficiency by using the tab key to focus on the next empty input field within a grid component. If an input field already has a value, it will be skipped. For example, if the cursor is in input field 2 and field 3 is filled ...

Screening new elements to be included in the array

When adding new items to an array in my App, I encountered a problem with filtering the newly added items. If I use .filter by state, it modifies the original array and I am unable to filter from the beginning (original array). I attempted to filter using ...

What is the best way to display a 'confirmed' message on my registration page once a user has submitted their information?

I have set up a nodejs server and developed a registration page using HTML. When users click the submit button, the server I built receives the input data and validates it. If the user is successfully added to the database, I want to display a new message ...

Is it possible to transform all values in arrays to 0s in JavaScript/p5.js during the copying process?

Iā€™m struggling with a simple code where I want to store an array of arrays containing FFT audio data. It seems like there might be a JavaScript issue because when I try to push the array into another array called spectrums, all the values inside spectr ...

Tips for effectively refining an Angular model (array) without compromising its integrity

I am currently working with a model for my view. This model consists of an array of objects: var arr = { "12345qwery": { prop1: "value", prop2: "value" } } // consisting of 500 items When filtering this array today, I use the following method: arr = $ ...

Compare the versions of React used in the linked library and the workspace application

As I work on developing a React library containing my commonly used components, I have organized my project structure in the following way: In the root folder, there is my rollup config file and the src/ folder which houses my library. Upon building, the ...

javascript accessing an external variable inside ajax function

I have implemented dajaxice to fetch a json attribute that I want to make global. However, I am facing an issue where my global variable is always showing up as "undefined": var recent_id; $(function(){ recent_id = Dajaxice.ticker.get_home_timeline(ge ...

The operation to remove the child element could not be completed

var first_content = document.getElementById('first-content'), offered_games = document.getElementById('offered-games'); for(var i = 0, e = offered_games.children; i < e.length; i++) { e[i].onmouseenter = function() { var ...

Using JavaScript and the Firefox browser, learn how to easily highlight an element with Selenium-WebDriver

I am struggling with creating a valid function to highlight specific elements on a webpage. As a beginner in coding, I suspect that the issue may either be related to my environment setup or a lack of knowledge about JavaScript/Selenium features. I am wri ...