I am making this calculator and I want to add numbers on click. Should I add an event listener or is there an easier way? I want the number to go to the 'current' class.
<div class="calc-grid">
<div class="output">
<div class="prev">123</div>
<div class="current">456</div>
</div>
<button class='span'>AC</button>
<button>DEL</button>
<button>รท</button>
<button>1</button>
<button>2</button>
<button>3</button>
<button>*</button>
<button>4</button>
<button>5</button>
<button>6</button>
<button>+</button>
<button>8</button>
<button>8</button>
<button>9</button>
<button>-</button>
<button>.</button>
<button>0</button>
<button class='span'>=</button>
</div>
Use an onClick event to fire some JS code:
<button onClick="calculate(this)">1</button>
Also assign an id to the div you want to modify to make it simple to look up:
<div class="current" id="current">456</div>
Here's an example that adds the number that you click on.
Try Considering This One: Probably Might Help You.
<!DOCTYPE html>
<html lang = "en">
<head>
<title> JavaScript Calculator </title>
<style>
#clear{
width: 270px;
border: 3px solid gray;
border-radius: 3px;
padding: 20px;
background-color: blue;
}
.formstyle
{
width: 300px;
height: 530px;
margin: auto;
border: 3px solid skyblue;
border-radius: 5px;
padding: 20px;
}
input
{
width: 20px;
background-color: white;
color: black;
border: 3px solid gray;
border-radius: 5px;
padding: 26px;
margin: 5px;
font-size: 15px;
}
#calc{
width: 250px;
border: 5px solid black;
border-radius: 3px;
padding: 20px;
margin: auto;
}
</style>
</head>
<body>
<div class= "formstyle">
<form name = "form1">
<input id = "calc" type ="text" name = "answer"> <br> <br>
<input type = "button" value = "1" onclick = "form1.answer.value += '1' ">
<input type = "button" value = "2" onclick = "form1.answer.value += '2' ">
<input type = "button" value = "3" onclick = "form1.answer.value += '3' ">
<input type = "button" value = "+" onclick = "form1.answer.value += '+' ">
<br> <br>
<input type = "button" value = "4" onclick = "form1.answer.value += '4' ">
<input type = "button" value = "5" onclick = "form1.answer.value += '5' ">
<input type = "button" value = "6" onclick = "form1.answer.value += '6' ">
<input type = "button" value = "-" onclick = "form1.answer.value += '-' ">
<br> <br>
<input type = "button" value = "7" onclick = "form1.answer.value += '7' ">
<input type = "button" value = "8" onclick = "form1.answer.value += '8' ">
<input type = "button" value = "9" onclick = "form1.answer.value += '9' ">
<input type = "button" value = "*" onclick = "form1.answer.value += '*' ">
<br> <br>
<input type = "button" value = "/" onclick = "form1.answer.value += '/' ">
<input type = "button" value = "0" onclick = "form1.answer.value += '0' ">
<input type = "button" value = "." onclick = "form1.answer.value += '.' ">
<input type = "button" value = "=" onclick = "form1.answer.value = eval(form1.answer.value) ">
<br>
<input type = "button" value = "Clear All" onclick = "form1.answer.value = ' ' " id= "clear" >
<br>
</form>
</div>
</body>
</html>
Related
I'm trying to make a calculator I wanted to take the number and the operation from the input and onclick to display the result in another input field. Just to test if the button work console.log(num1+num2) but I see no result in the console log. and i also what to know how i can pass my operation from the input
var num1 = document.getElementById("num1").value;
var num2 = document.getElementById("num2").value;
var oper = document.getElementById("oper").value;
var cal = document.getElementById("cal").value;
var res = document.getElementById("num1").value;
var calculatorBtn = document.getElementById("calculator");
const form = document.querySelector("formCal");
function calculate() {
console.log(num1 + num2);
}
<div class="root">
<h1>Calculator</h1>
<form action="" id="formCal">
<div class="calculator">
<div class="box">
<label for="num1">Number 1</label>
<input type="number" placeholder="num1" id="num1">
</div>
<div class="box">
<label for="num2">Number 2</label>
<input type="number" placeholder="num2" id="num2">
</div>
<div class="box">
<label for="oper">operation</label>
<input type="text" placeholder="oper" id="oper">
</div>
<div class="box">
<label for="res">Result</label>
<input type="number" placeholder="res" id="res">
</div>
<div class="box">
<input type="button" id="cal" value="calculator" placeholder="calculate" onclick="calculate()" />
</div>
</div>
</form>
</div>
You have to check for the value inside your function. Otherwise this won't get triggered again.
function calculate(){
var num1 = parseInt(document.getElementById("num1").value);
var num2 = parseInt(document.getElementById("num2").value);
console.log(num1+num2);
}
<!DOCTYPE html>
<html lang="en">
<body>
<div class="root">
<h1>Calculator</h1>
<form action="" id="formCal">
<div class="calculator">
<div class="box">
<label for="num1">Number 1</label>
<input type="number" placeholder="num1" id="num1">
</div>
<div class="box">
<label for="num2">Number 2</label>
<input type="number" placeholder="num2" id="num2">
</div>
<div class="box">
<label for="oper">operation</label>
<input type="text" placeholder="oper" id="oper">
</div>
<div class="box">
<label for="res">Result</label>
<input type="number" placeholder="res" id="res">
</div>
<div class="box">
<input type="button" id="cal" value="calculator" placeholder="calculate" onclick="calculate()"/>
</div>
</div>
</form>
</div>
</body>
</html>
I believe it's because the code doesn't update the variables, so it's just set to the value and the value is null at that time its set,I fixed it:
<!DOCTYPE html>
<html lang="en">
<body>
<div class="root">
<h1>Calculator</h1>
<form action="" id="formCal">
<div class="calculator">
<div class="box">
<label for="num1">Number 1</label>
<input type="number" placeholder="num1" id="num1">
</div>
<div class="box">
<label for="num2">Number 2</label>
<input type="number" placeholder="num2" id="num2">
</div>
<div class="box">
<label for="oper">operation</label>
<input type="text" placeholder="oper" id="oper">
</div>
<div class="box">
<label for="res">Result</label>
<input type="number" placeholder="res" id="res">
</div>
<div class="box">
<input type="button" id="cal" value="calculator" placeholder="calculate" onclick="calculate()"/>
</div>
</div>
</form>
</div>
<headers>
<script >
var num1 =document.getElementById("num1").value;
var num2= document.getElementById("num2").value ;
var oper=document.getElementById("oper").value ;
var cal=document.getElementById("cal") ;
var res=document.getElementById("num1").value ;
var calculatorBtn =document.getElementById("calculator");
const form = document.querySelector("formCal");
function calculate(){
var num1 = new Number(document.getElementById("num1").value);
var num2 = new Number(document.getElementById("num2").value) ;
var res = document.getElementById("res")
switch(document.getElementById("oper").value)
{
case "+":
res.value = num1 + num2;
break;
case "-":
res.value = num1 - num2;
break;
case "*":
res.value = num1 * num2;
break;
case "/":
res.value = num1/num2;
break;
}
}
</script>
</headers>
</body>
</html>
All the JS codes outside the function will get executed immediately once the page starts to load. In your case, you will enter values in text box only after the page gets loaded.
The num1 and num2 variables will not get assigned at the time you hit on the calculate button as these codes are outside the function.
Secondly, you should use ParseInt as javascript will consider your values as strings and gives you concatenated result.
Replace your script as below,
/*var oper=document.getElementById("oper").value ;
var cal=document.getElementById("cal").value ;
var res=document.getElementById("num1").value ;
var calculatorBtn =document.getElementById("calculator");
const form = document.querySelector("formCal");*/
function calculate(){
var num1 =document.getElementById("num1").value ;
var num2= document.getElementById("num2").value ;
console.log(parseInt(num1)+parseInt(num2));
}
<!-- Create a simple Program to build the Calculator in JavaScript using with HTML and CSS web languages. -->
<!DOCTYPE html>
<html lang = "en">
<head>
<title> JavaScript Calculator </title>
<style>
h1 {
text-align: center;
padding: 23px;
background-color: skyblue;
color: white;
}
#clear{
width: 270px;
border: 3px solid gray;
border-radius: 3px;
padding: 20px;
background-color: red;
}
.formstyle
{
width: 300px;
height: 530px;
margin: auto;
border: 3px solid skyblue;
border-radius: 5px;
padding: 20px;
}
input
{
width: 20px;
background-color: green;
color: white;
border: 3px solid gray;
border-radius: 5px;
padding: 26px;
margin: 5px;
font-size: 15px;
}
#calc{
width: 250px;
border: 5px solid black;
border-radius: 3px;
padding: 20px;
margin: auto;
}
</style>
</head>
<body>
<h1> Calculator Program in JavaScript </h1>
<div class= "formstyle">
<form name = "form1">
<!-- This input box shows the button pressed by the user in calculator. -->
<input id = "calc" type ="text" name = "answer"> <br> <br>
<!-- Display the calculator button on the screen. -->
<!-- onclick() function display the number prsses by the user. -->
<input type = "button" value = "1" onclick = "form1.answer.value += '1' ">
<input type = "button" value = "2" onclick = "form1.answer.value += '2' ">
<input type = "button" value = "3" onclick = "form1.answer.value += '3' ">
<input type = "button" value = "+" onclick = "form1.answer.value += '+' ">
<br> <br>
<input type = "button" value = "4" onclick = "form1.answer.value += '4' ">
<input type = "button" value = "5" onclick = "form1.answer.value += '5' ">
<input type = "button" value = "6" onclick = "form1.answer.value += '6' ">
<input type = "button" value = "-" onclick = "form1.answer.value += '-' ">
<br> <br>
<input type = "button" value = "7" onclick = "form1.answer.value += '7' ">
<input type = "button" value = "8" onclick = "form1.answer.value += '8' ">
<input type = "button" value = "9" onclick = "form1.answer.value += '9' ">
<input type = "button" value = "*" onclick = "form1.answer.value += '*' ">
<br> <br>
<input type = "button" value = "/" onclick = "form1.answer.value += '/' ">
<input type = "button" value = "0" onclick = "form1.answer.value += '0' ">
<input type = "button" value = "." onclick = "form1.answer.value += '.' ">
<!-- When we click on the '=' button, the onclick() shows the sum results on the calculator screen. -->
<input type = "button" value = "=" onclick = "form1.answer.value = eval(form1.answer.value) ">
<br>
<!-- Display the Cancel button and erase all data entered by the user. -->
<input type = "button" value = "Clear All" onclick = "form1.answer.value = ' ' " id= "clear" >
<br>
</form>
</div>
</body>
</html>
Once you have a string for the calculation, you can run the eval() function to execute the calculation as JavaScript code.
Since you are generating a string, you might not need the parseInt at all.
Using eval() poses a potential security risk, if you publish a site using it. Use it only for your learning experiments.
function calculate(){
const num1 = document.getElementById("num1").value;
const num2 = document.getElementById("num2").value;
const oper = document.getElementById("oper").value;
document.getElementById('res').value = eval(num1 + oper + num2);
}
I have this code where I take the submissions from a form and append it to a HTML.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
<style>
* {
box-sizing: border-box;
}
div {
padding: 10px;
background-color: #f6f6f6;
overflow: hidden;
}
input[type=text],
textarea,
select {
font: 17px Calibri;
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
}
input[type=button] {
font: 17px Calibri;
width: auto;
float: right;
cursor: pointer;
padding: 7px;
}
</style>
</head>
<body>
<div>
<div>
<input type="text" id="txtName" placeholder="Enter your name" />
</div>
<div>
<input type="text" id="txtAge" placeholder="Enter your age" />
</div>
<div>
<input type="text" id="txtEmail" placeholder="Enter your email address" />
</div>
<div>
<select id="selCountry">
<option selected value="">-- Choose the country --</option>
<option value="India">India</option>
<option value="Japan">Japan</option>
<option value="USA">USA</option>
</select>
</div>
<div>
<textarea id="msg" name="msg" placeholder="Write some message ..." style="height:100px"></textarea>
</div>
<div>
<input type="button" id="bt" value="Write" onclick="writeFile()" />
</div>
</div>
<p>Submission Number: <a id="clicks">1</a>
<div class="output-area">
<h4>Output</h4>
<div id="output" class="inner">
</div>
</div>
<span></span>
</body>
<script>
var clicks = 1;
let writeFile = () => {
const name = document.getElementById('txtName');
const age = document.getElementById('txtAge');
const email = document.getElementById('txtEmail');
const country = document.getElementById('selCountry');
const msg = document.getElementById('msg');
const submissions = document.getElementById('clicks');
let data = [
`<p>Name: ${name.value}</p>`,
`<p>Age: ${age.value}</p>`,
`<p>Email: ${email.value}</p>`,
`<p>Country: ${country.value}</p>`,
`<p>Message: ${msg.value}</p>`,
`<p>Submission No: ${submissions.value}</p>`];
$('#output').append("<br />" + "<br />");
data.forEach(line => $('#output').append(line));
clicks += 1;
document.getElementById("clicks").innerHTML = clicks;
}
</script>
</html>
In this code, I wanted to print the users' current submission number. So I made a click counter.
clicks += 1;
document.getElementById("clicks").innerHTML = clicks;
And then I tried to put it into a constant and append it.
const submissions = document.getElementById('clicks');
But issue I'm facing here is, when appended my submission field comes out as Submission No: undefined. Any help would be much appreciated.
Your submissions element is an anchor (<a>) element. These HTML elements do not have a value field.
You can read the value the same way you are writing it, via innerHTML.
E.g.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
<style>
* {
box-sizing: border-box;
}
div {
padding: 10px;
background-color: #f6f6f6;
overflow: hidden;
}
input[type=text],
textarea,
select {
font: 17px Calibri;
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
}
input[type=button] {
font: 17px Calibri;
width: auto;
float: right;
cursor: pointer;
padding: 7px;
}
</style>
</head>
<body>
<div>
<div>
<input type="text" id="txtName" placeholder="Enter your name" />
</div>
<div>
<input type="text" id="txtAge" placeholder="Enter your age" />
</div>
<div>
<input type="text" id="txtEmail" placeholder="Enter your email address" />
</div>
<div>
<select id="selCountry">
<option selected value="">-- Choose the country --</option>
<option value="India">India</option>
<option value="Japan">Japan</option>
<option value="USA">USA</option>
</select>
</div>
<div>
<textarea id="msg" name="msg" placeholder="Write some message ..." style="height:100px"></textarea>
</div>
<div>
<input type="button" id="bt" value="Write" onclick="writeFile()" />
</div>
</div>
<p>Submission Number: <a id="clicks">1</a>
<div class="output-area">
<h4>Output</h4>
<div id="output" class="inner">
</div>
</div>
<span></span>
</body>
<script>
var clicks = 1;
let writeFile = () => {
const name = document.getElementById('txtName');
const age = document.getElementById('txtAge');
const email = document.getElementById('txtEmail');
const country = document.getElementById('selCountry');
const msg = document.getElementById('msg');
const submissions = document.getElementById('clicks');
let data = [
`<p>Name: ${name.value}</p>`,
`<p>Age: ${age.value}</p>`,
`<p>Email: ${email.value}</p>`,
`<p>Country: ${country.value}</p>`,
`<p>Message: ${msg.value}</p>`,
`<p>Submission No: ${submissions.innerHTML}</p>`]; // Use innerHTML here
$('#output').append("<br />" + "<br />");
data.forEach(line => $('#output').append(line));
clicks += 1;
document.getElementById("clicks").innerHTML = clicks;
}
</script>
</html>
Generally you could of course also insert the clicks variable directly (instead of the contents of the a element).
Note
It is highly insecure to render user-input into your HTML. It creates all sorts of vulnerabilities for malicious users so DON'T do this in production.
<a> tags don't have a value attribute. You'll have to use textContent or innerText to get the count.
console.log(document.getElementById('clicks').textContent);
<a id="clicks">2</a>
Ok, so submissions is not a input element and so it does not have the value method.
Instead of using submissions.value use submissions.innerHTML.
Also, rearrange the last few lines to make sure the clicks counter is updated before outputting all the data.
Edit: I did not realize your clicks counter was initially let clicks = 1; and not let clicks = 0;. The rearranging in the below JS will only work if clicks is initially set to 0.
I would generally advise to use let clicks = 0; because it makes more sense to potentially yourself and another person reading your code. If you think about it - when you make your counter (clicks), there have not been any clicks yet and so it would make more sense to have it initially set to 0.
let clicks = 0;
const writeFile = () => {
const name = document.getElementById('txtName');
const age = document.getElementById('txtAge');
const email = document.getElementById('txtEmail');
const country = document.getElementById('selCountry');
const msg = document.getElementById('msg');
const submissions = document.getElementById('clicks');
// ++ is same thing as += 1
clicks++;
submissions.innerHTML = clicks;
let data = [
`<p>Name: ${name.value}</p>`,
`<p>Age: ${age.value}</p>`,
`<p>Email: ${email.value}</p>`,
`<p>Country: ${country.value}</p>`,
`<p>Message: ${msg.value}</p>`,
`<p>Submission No: ${submissions.innerHTML}</p>`
];
$('#output').append("<br />" + "<br />");
data.forEach(line => $('#output').append(line));
}
I have created a form where the user will enter some information and the email will have to be validated before the user can proceed to the next page (thankyou.html) however when i input every thing correctly into the form the email gets validated but i cannot get to the next page...i cant figure out what im doing wrong. Any help would be appreciated and thank you in advance.
<script type = "text/javascript">
function validate()
{
var text = document.getElementById("text1").value;
var regx = /^([a-zA-Z0-9\.-]+)#([a-zA-Z0-9-]+)\.([a-z]{3})$/;
var uname = document.getElementById("name");
var title = document.getElementById("title1");
var comment = document.getElementById("cmt");
if(regx.test(text))
{
document.getElementById("lbltext").innerHTML="you may proceed";
document.getElementById("lbltext").style.visibility="visible";
document.getElementById("lbltext").style.color="green";
}
else{
document.getElementById("lbltext").innerHTML="invalid email";
document.getElementById("lbltext").style.visibility="visible";
document.getElementById("lbltext").style.color="black";
}
}
</script>
</head>
<body>
<form onsubmit = "return validate()" action = "thankyou.html" class = "input"><br><br>
<p style = "text-decoration: underline; color: white;">comment :</p><br>
<input id= "name" placeholder= "Name" type= "text" style = "height: 25px; width:250px;"/><br><br>
<input id = "text1" placeholder = "Email" type= "text" style = "height: 25px; width: 250px;"/><p style = "font-size: 25px; color: red; display: inline-block;">*</p><label id= "lbltext" style = "color: black;visibility: hidden"></label><br><br>
<input id= "title1" placeholder= "title" type= "text" style = "height: 25px; width: 500px;"/><br><br>
<textarea id= "cmt" placeholder= "Comment" type= "text" style = "height: 250px; width: 500px;"></textarea><br><br>
<button onClick="validate()" type="button" style = "color: white; font-weight: bold; background-color: #9933ff; width: 75px; height: 30px;float: right; margin-right: 90px; border:thick; border-color: black;">Submit</button>
</form>
</body>
Since you are using return validate(), The onSubmit is expecting a boolean return value from validate(). So, If you want to submit the form you should return true, If not return false.
NOTE
If you want to access the form data in next page, You should set name property for your input fields.
Since you are using onSubmit, You don't need to put onClick to the button. And the button type should be submit not button.
function validate()
{
var text = document.getElementById("text1").value;
var regx = /^([a-zA-Z0-9\.-]+)#([a-zA-Z0-9-]+)\.([a-z]{3})$/;
var uname = document.getElementById("name");
var title = document.getElementById("title1");
var comment = document.getElementById("cmt");
if(regx.test(text))
{
document.getElementById("lbltext").innerHTML="you may proceed";
document.getElementById("lbltext").style.visibility="visible";
document.getElementById("lbltext").style.color="green";
return true;
}
else{
document.getElementById("lbltext").innerHTML="invalid email";
document.getElementById("lbltext").style.visibility="visible";
document.getElementById("lbltext").style.color="black";
return false;
}
}
<body>
<form onsubmit = "return validate()" action = "thankyou.html" class = "input"><br><br>
<p style = "text-decoration: underline; color: white;">comment :</p><br>
<input id= "name" placeholder= "Name" type= "text" style = "height: 25px; width:250px;"/><br><br>
<input id = "text1" placeholder = "Email" type= "text" style = "height: 25px; width: 250px;"/><p style = "font-size: 25px; color: red; display: inline-block;">*</p><label id= "lbltext" style = "color: black;visibility: hidden"></label><br><br>
<input id= "title1" placeholder= "title" type= "text" style = "height: 25px; width: 500px;"/><br><br>
<textarea id= "cmt" placeholder= "Comment" type= "text" style = "height: 250px; width: 500px;"></textarea><br><br>
<button type="submit" style = "color: white; font-weight: bold; background-color: #9933ff; width: 75px; height: 30px;float: right; margin-right: 90px; border:thick; border-color: black;">Submit</button>
</form>
</body>
Also it looks like you're just going to the tankyou.html immediately after validation. It seems to me like you don't need the green 'you may proceed'. You could clean up your code a little.
if(regx.test(text) === false)
{
document.getElementById("lbltext").innerHTML="invalid email";
document.getElementById("lbltext").style.visibility="visible";
document.getElementById("lbltext").style.color="black";
return false;
}
else
{
return true;
}
In my app, I am letting the user add categories. Each category is a simple href with label that the user entered as a name of category. The problem I am having is the category name is shown (undefined). So I am not sure where is the problem. Also, when I click again on add category, the previously created one disappear!
var boxName="type here";
var inputt = document.getElementById("boxName").value;
function addInput()
{
// var boxName="type here";
document.getElementById('responce').innerHTML='<br/><input type="text" id="'+boxName+'" value="'+boxName+'" /><input type="button" onclick="addlinking()" value="Add"/><span id="Adding"></span>';
var inputt = document.getElementById("boxName").value;
addlinking(inputt);
}
function addlinking(tt){
document.getElementById('Adding').innerHTML = '<br/><input type="submit" onclick="addinghref()" value="'+tt+'"><i class="fa fa-angle-right"></i></a><span id="Linking"></span>';
}
function addinghref()
{
document.getElementById('Linking').innerHTML='';
}
<input type="button" onclick="addInput()" value="Add Category">
<span id="responce"></span>
var catTemplate = document.getElementById("adding-template")
.content
.querySelector(".category");
var createCatDiv = document.getElementById('create-cat');
var createCatInput = createCatDiv.querySelector("input[type=text]");
function addInput()
{
// Clear previous entry.
createCatInput.value = "";
// Show the div.
createCatDiv.classList.remove("hidden");
}
function addlinking()
{
// Hide the create cat div.
createCatDiv.classList.add("hidden");
// Import the category div from the template.
var catDiv = document.importNode(catTemplate, true);
document.getElementById("response").appendChild(catDiv);
// Set the input.
var input = catDiv.querySelector("input");
input.value = createCatInput.value;
// Replace duckduckgo by the address of your link.
input.onclick = location.assign.bind(location, "https://duckduckgo.com");
}
#create-cat {
margin-top: 1em;
}
#create-cat.hidden {
display: none;
}
.category{
margin-top: 1em;
}
.category input[type=button] {
background-color: lightblue;
border-style: solid;
border-color: gray;
border-width: 1px;
border-radius: 5px;
}
.category input[type=button]:hover {
background-color: blue;
color: white;
border-color: black;
}
.category input[type=button]:active {
background-color: black;
color: white;
border-color: black;
}
<template id="adding-template">
<div class="category">
<input type="button" />
</div>
</template>
<input type="button" onclick="addInput()" value="Add Category">
<div id="response"></div>
<div id="create-cat" class="hidden">
<input type="text" placeholder="type here" />
<input type="button" onclick="addlinking()" value="Add"/>
</div>
var boxName = "type here";
var id = boxName.replace(/\s/g, '_');
function addInput() {
document.getElementById('responce').innerHTML = '<br/><input type="text" id="' + id + '" value="' + boxName + '" /><input type="button" onclick="addlinking()" value="Add"/><span id="Adding"></span>';
}
function addlinking(tt) {
var inputt = document.getElementById(id).value;
document.getElementById('Adding').innerHTML = '<br/><input type="submit" onclick="addinghref()" value="' + inputt + '"><i class="fa fa-angle-right"></i></a><span id="Linking"></span>';
}
function addinghref() {
document.getElementById('Linking').innerHTML = 'Link';
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.1.1/normalize.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<input type="button" onclick="addInput()" value="Add Category">
<span id="responce"></span>
I am attempting to create a simple calculator using html5, css3 and javascript. My problem is that my button for exponent does not seem to work, all the other operator buttons work fine. My code is as follows:
<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>
just for fun - partially working calculator. DEMO
to make your calculator working you should include bunch of javascript code, without it wont do anything.
Catch button clicks by JQuery on method.
$('.box').on('click','.button',function(){
You need a script, like JavaScript, to handle actions performed by the Client. For the most part, HTML is only a markup language (to display data), and CSS (in <style></style> tags) is a way to format/design that markup. You need a script to handle actions,
HTML: onclick="call the JavaScript function(pass in the value of that button)"
<p><input type = "button" class = "button gray" value = "1" onclick="showNum(this.value)">
JS: Take the value as input, get the input box by ID (.getElementById(your id)), display it
function showNum (input) {
var display = document.getElementById("btn");
display.value = input;
}
Here is a working paste bin:
http://jsbin.com/xijatosate/1/edit?html,css,js,output
Here, I fixed code for you.
function display(val) {
var dis = document.getElementById("btn");
dis.value += val;
}
You should start from this template. I suggest you to start your coding career at www.w3schools.com/.
Have fun!
Full code jsfiddle