i wanted to make calculator using JavaScript - javascript

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);
}

Related

Javascript appended code comes as undefined

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));
}

How to add number on button click in Javascript?

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>

i didn t get the result in my simple javascript calculator

i m trying to make a simple calculator by javascript ,and i didnt get anything in textbox result.
<html>
<head>
<script type="text/javascript">
function sum()
{
var x1 = document.getElementById("text1");
var x2 = document.getElementById("text2");
var y = document.getElementById("text3");
var sum = parseFloat(x1) + parseFloat(x2);
y.value = "the result is, " + sum;
}
</script>
</head>
<body>
<form>
<fieldset style="width : 100px ;text-align: center; margin-left: auto;margin-right: auto;">
<legend> sum +++ +++ calculator</legend>
<input type="text" placeholder="tap first number" id="text1"><br>
<input type="text" placeholder="tap second number" id="text2"><br>
<input type="button" value="=" onclick="sum()"><br>
<input type="text" placeholder="result" id="text3"><br>
</fieldset>
</form>
</body>
</html>
Your x1 and x2 refer to the input box rather than to the value. Change to:
var x1 = document.getElementById("text1").value;
var x2 = document.getElementById("text2").value;
The reason is because you are never getting values from text field.
Check below:
function sum() {
var x1 = document.getElementById("text1");
var x2 = document.getElementById("text2");
var y = document.getElementById("text3");
var sum = parseFloat(x1.value) + parseFloat(x2.value);
y.value = "the result is, " + sum;
}
<form>
<fieldset style="width : 100px ;text-align: center; margin-left: auto;margin-right: auto;">
<legend> sum +++ +++ calculator</legend>
<input type="text" placeholder="tap first number" id="text1">
<br>
<input type="text" placeholder="tap second number" id="text2">
<br>
<input type="button" value="=" onclick="sum()">
<br>
<input type="text" placeholder="result" id="text3">
<br>
</fieldset>
</form>
Hope it helps you.
Thanks!
<html>
<head>
<script type="text/javascript">
function sum()
{
var x1 = document.getElementById("text1");
var x2 = document.getElementById("text2");
var y = document.getElementById("text3");
var sum = parseFloat(x1.value) + parseFloat(x2.value);
y.value = "the result is, " + sum;
}
</script>
</head>
<body>
<form>
<fieldset style="width : 100px ;text-align: center; margin-left: auto;margin-right: auto;">
<legend> sum +++ +++ calculator</legend>
<input type="text" placeholder="tap first number" id="text1"><br>
<input type="text" placeholder="tap second number" id="text2"><br>
<input type="button" value="=" onclick="sum()"><br>
<input type="text" placeholder="result" id="text3"><br>
</fieldset>
</form>
</body>
</html>

Homework help: Returning a value in JavaScript?

I'm working on a homework assignment where we have to make a simple calculator in JavaScript. Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Calculator</title>
<style>
div{
display: inline-block;
}
#first{
float: left;
position: relative;
top: 65px;
}
#fieldset{
width: 70px;
{
#second{
}
#compute{
position: relative;
{
</style>
<script>
window.onload = function(){
alert('Welcome to the JavaScript Calculator!');
};
function compute() {
var firstValue = document.getElementById("first").value;
var secondValue = document.getElementById("second").value;
var output;
if (document.getElementById("plus").checked === true)
{
output = firstValue + secondValue;
}
else if (document.getElementById("minus").checked === true)
{
output = firstValue - secondValue;
}
else if (document.getElementById("times").checked === true)
{
output = firstValue*secondValue;
}
else if (document.getElementById("divide").checked === true)
{
output = firstValue/secondValue;
}
return output;
}
</script>
</head>
<body>
<header>
<h1>Simple Calculator</h1>
</header>
<form>
<div id="first">
First value: <input type="text" name="FirstValue" />
</div>
<div id="fieldset">
<fieldset id=radio>
<label for="plus">+</label>
<input type="radio" id="plus" name="type" value="plus" checked/><br>
<label for="minus">-</label>
<input type="radio" id="minus" name="type" value="minus"/><br>
<label for="times">x</label>
<input type="radio" id="times" name="type" value="times"/><br>
<label for="divide">÷</label>
<input type="radio" id="divide" name="type" value="divide"/>
</fieldset>
</div>
<div id="second">
Second value: <input type="text" name="SecondValue" />
</div>
<div id="compute">
<button type="button" onclick = "compute();">Compute</button>
</div>
Result:
</form>
</body>
</html>
The calculator won't run, and I think that has something to do with how I've set it up to return. Does returning output print it to the screen? If not, how do I get this to happen? Please help! Thanks.
There was a few things you needed to do.
You needed to get the value inserted into the textbox, not the value of the div.
You also needed to convert the input from a string to a number using parseInt.
Returning the output won't show it on the screen. Instead of returning the output, you needed to add it to the page as an answer by using innerHTML.
Run the code snippet below to see it in action.
<html>
<head>
<meta charset="utf-8" />
<title>Calculator</title>
<style>
div{
display: inline-block;
}
#first{
float: left;
position: relative;
top: 65px;
}
#fieldset{
width: 70px;
{
#second{
}
#compute{
position: relative;
}
</style>
<script>
window.onload = function(){
alert('Welcome to the JavaScript Calculator!');
};
function compute() {
var firstValue = parseInt(document.getElementById("firstValue").value);
var secondValue = parseInt(document.getElementById("secondValue").value);
var output;
if (document.getElementById("plus").checked === true)
{
output = firstValue + secondValue;
}
else if (document.getElementById("minus").checked === true)
{
output = firstValue - secondValue;
}
else if (document.getElementById("times").checked === true)
{
output = firstValue*secondValue;
}
else if (document.getElementById("divide").checked === true)
{
output = firstValue/secondValue;
}
document.getElementById("result").innerHTML = "Result: " + output;
return output;
}
</script>
</head>
<body>
<header>
<h1>Simple Calculator</h1>
</header>
<form>
<div id="first">
First value: <input id="firstValue" type="text" name="FirstValue" />
</div>
<div id="fieldset">
<fieldset id=radio>
<label for="plus">+</label>
<input type="radio" id="plus" name="type" value="plus" checked/><br>
<label for="minus">-</label>
<input type="radio" id="minus" name="type" value="minus"/><br>
<label for="times">x</label>
<input type="radio" id="times" name="type" value="times"/><br>
<label for="divide">÷</label>
<input type="radio" id="divide" name="type" value="divide"/>
</fieldset>
</div>
<div id="second">
Second value: <input id="secondValue" type="text" name="SecondValue" />
</div>
<div id="compute">
<button type="button" onclick="compute();">Compute</button>
</div>
<div id="result">
Result:
</div>
</form>
</body>
</html>

JavaScript calculator calculates unchecked box

I'm rather new to javascript and i'm trying to make a calculator that instantly calculates a total price of selected products.
The calculator works fine but right now the checkbox gets calculated alongside the rest of the products even when unchecked.
I'm trying to make it so that when it is unchecked the value is 0 and when it is checked it is 0.50.
This is what I have so far:
<head>
<style type="text/css">
.right{
margin-top: 10px;
width: 150px;
height: 45px;
background-color: #66CCFF;
}
p{
margin: 0;
padding: 0;
}
</style>
<script type="text/javascript">
<!--
function calculate() {
var A1 = document.getElementById('Amount1').value
var A2 = document.getElementById('Amount2').value
var A3 = document.getElementById('Amount3').value
var PStart = 0;
var P1 = A1*1.50;
var P2 = A2*1.00;
var P3 = A3*1.00;
var PTotal = P1+P2+P3;
var Insert = document.getElementById("TotalPrice");
TotalPrice.innerHTML= PTotal;
}
-->
</script>
</head>
<body onload="calculate()">
<form>
<fieldset>
<legend>Price</legend>
<div class="FormRow">
<label for="Amount2">Console $1,50</label>
<input type="text" min=0 id="Amount1" name="Amount1" oninput="calculate()" />
</div>
<div class="FormRow">
<label for="Amount2">Controller $1,00</label>
<input type="text" min=0 id="Amount2" name="Amount2" oninput="calculate()" />
</div>
<div class="FormRow">
<label for="Amount3">Batteries? $0,50</label>
<input type="checkbox" value="0.50" id="Amount3" name="Amount3" onchange="calculate()"/>
</div>
<div class="right" >
<p><b>Total price:</b></p>
<p id="TotalPrice">
</p>
</div>
</fieldset>
</form>
</body>
Try this:
var A1 = document.getElementById('Amount1').value
var A2 = document.getElementById('Amount2').value
var A3 = document.getElementById('Amount3').checked ?
document.getElementById('Amount3').value : 0;
Demo
You can use document.getElementById('Amount1').checked to verify if the checkbox is checked. So your code would look like
var A1 = document.getElementById('Amount1').checked ?
parseFloat(document.getElementById('Amount1').value) :
0;
var A2 = document.getElementById('Amount1').checked ?
parseFloat(document.getElementById('Amount1').value) :
0;
var Total = A1 + A2;

Categories