I'm creating a simple web app that takes two values, outputs a total, then displays VAT of 20% in the VAT field (to clarify, this shows 20% of the total previously calculated) then it should have a final grand total field which adds the total to the VAT, however I haven't gotten round to this part as I'm having difficulty calculating the VAT in my code, this is what I have thus far:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form>
Value 1: <input type="text" name="val1"><br>
Value 2: <input type="text" name="val2"><br>
Total: <input type="text" name="sum"><br>
VAT:<input type="text" name="vat"><br>
<input type="button" value="Sum" onclick="sumTotal() + vatCalc()">
</form>
<script>
function sumTotal() {
let val1 = document.getElementsByName("val1")[0].value;
let val2 = document.getElementsByName("val2")[0].value;
let sum = Number(val1) + Number(val2);
document.getElementsByName("sum")[0].value = sum;
}
function vatCalc () {
// let vat= document.getElementsByName("vat")
var sumVat = 20;
let vat = (sum/100)*(sumVat+100);
document.getElementsByName("vat")[0].value = vat;
}
</script>
</body>
</html>
any help would be greatly appreciated please, thanks!
I've edited your functions so now sumtotal calls your vat function.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form>
Value 1: <input type="text" name="val1"><br>
Value 2: <input type="text" name="val2"><br>
Total: <input type="text" name="sum"><br>
VAT:<input type="text" name="vat"><br>
<input type="button" value="Sum" onclick="sumTotal()">
</form>
<script>
function sumTotal() {
let val1 = document.getElementsByName("val1")[0].value;
let val2 = document.getElementsByName("val2")[0].value;
let sum = Number(val1) + Number(val2);
document.getElementsByName("sum")[0].value = sum;
vatCalc(sum);
}
function vatCalc (sum) {
// let vat= document.getElementsByName("vat")
var sumVat =0.20;
let vat = sumVat*sum;
document.getElementsByName("vat")[0].value = vat;
}
</script>
</body>
</html>
Related
I've got a very simple form and I'm want the values to empty when I submit in order to use again without refreshing the page. What I've got isn't working for some reason.
My initial idea was to set the values of the inputs to empty strings on form submit, but when I log them into the console they don't do that. Anyone know what I'm doing wrong here?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<form id="form">
<input id="volume" type="text" />
<input id="denied" type="text" />
<input id="charges" type="number" step="any" />
<button id="submit" type="btn-submit">Submit</button>
</form>
<div class="results">
<p class="rate">Current Denial Rate: </p>
<p class="recoverable">Recoverable Dollars: </p>
</div>
<script src="script.js"></script>
</body>
</html>
let form = document.getElementById("form");
let volume = document.getElementById("volume");
let denied = document.getElementById("denied");
let charges = document.getElementById("charges");
let submit = document.getElementById("btn-submit");
let results = document.querySelector(".results");
let rate = document.querySelector(".rate");
let recoverable = document.querySelector(".recoverable");
form.onsubmit = function (e) {
e.preventDefault();
volume = volume.value;
denied = denied.value;
charges = charges.value;
let curDenialRate = parseFloat((denied / volume) * 100);
charges = parseFloat(charges * 0.4);
function formatNumber(num) {
let formattedNum = num.toFixed(2);
return formattedNum;
}
let recoverableDollars = "$" + formatNumber(charges);
curDenialRate = formatNumber(curDenialRate) + "%";
rate.append(curDenialRate);
recoverable.append(recoverableDollars);
volume = " ";
denied = " ";
charges = " ";
return false;
};
Use HTMLFormElement.reset():
let form = document.getElementById("form");
const volume = document.getElementById("volume");
const denied = document.getElementById("denied");
const charges = document.getElementById("charges");
let submit = document.getElementById("btn-submit");
let results = document.querySelector(".results");
let rate = document.querySelector(".rate");
let recoverable = document.querySelector(".recoverable");
form.onsubmit = function(e) {
e.preventDefault();
let a = volume.value;
let b = denied.value;
let c = charges.value;
let curDenialRate = parseFloat((b / a) * 100);
c = parseFloat(c * 0.4);
function formatNumber(num) {
let formattedNum = num.toFixed(2);
return formattedNum;
}
let recoverableDollars = "$" + formatNumber(c);
curDenialRate = formatNumber(curDenialRate) + "%";
rate.append(curDenialRate);
recoverable.append(recoverableDollars);
form.reset();
return false;
};
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<form id="form">
<input id="volume" type="text" />
<input id="denied" type="text" />
<input id="charges" type="number" step="any" />
<button id="submit" type="btn-submit">Submit</button>
</form>
<div class="results">
<p class="rate">Current Denial Rate: </p>
<p class="recoverable">Recoverable Dollars: </p>
</div>
<script src="script.js"></script>
</body>
</html>
How you are clearing values will not work. You are trying to change the variable but that will not affect the DOM element or its value.
You will have to use the below code with value property to change the value.
document.getElementById("volume").value= " ";
document.getElementById("denied").value= " ";
document.getElementById("charges").value= " ";
i have an issue using for loop to sum the values through elements inside HTML by pressing button but the code did not work correctly also i tried to show alert a massage that says "not a number" but every time show the same massage once i press the button
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input class="inp" type="" placeholder="Enter a Number " >
<input class="inp" type="" placeholder="Enter elec" >
<input class="inp" type="" placeholder="Enter food " >
<input class="inp" type="" placeholder="Enter car " >
<input class="inp" type="" placeholder="Enter resturent " >
<h1 class="total">total</h1>
<button class="btn">calculate</button>
<script
const btn= document.querySelector('.btn')
const total = document.querySelector('.total')
const inp = document.querySelectorAll('.inp')
btn.addEventListener('click',function(){
if (isNaN(inp.value)) {
alert("Not a number")
console.log(inp.value);
} if (inp.value === ""){
alert("enter number ")
}
for (let i = 0; i <inp.length; i++) {
let index = 0
const current = index + inp[i].value
total.innerHTML = index
}
})
</script>
</body>
</html>
Change to input type=number. Also check with typeof if the variable is a number. If not, you can convert it with JavaScript function parseInt().
Please change the type of your inputs, then move your "validation" inside your loop, then
move your counter outside the loop and change it to "let", then cast to number the input value before sum into the current.
have a nice day
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input class="inp" type="number" placeholder="Enter a Number ">
<input class="inp" type="number" placeholder="Enter elec">
<input class="inp" type="number" placeholder="Enter food ">
<input class="inp" type="number" placeholder="Enter car ">
<input class="inp" type="number" placeholder="Enter resturent ">
<h1 class="total">total</h1>
<button class="btn">calculate</button>
<script>
let btn = document.querySelector('.btn')
btn.addEventListener('click', function () {
const total = document.querySelector('.total')
const inps = document.querySelectorAll('.inp')
let current = 0;
for (let i = 0; i < inps.length; i++) {
if (isNaN(inps[i].value)) {
alert("Not a number")
break;
} if (inps[i].value == "") {
alert("enter number ")
break;
}
current += +inps[i].value
total.innerHTML = current
}
})
</script>
</body>
</html>
var num1=document.getElementById("number1");
var num2=document.getElementById("number2");
var k=Number(num1.value);
var l=Number(num2.value);
function add(){
onCout(k,l,function result(a,b){
return a+b;
});
}
function onCout(c,d,callback){
var result=callback(c,d);
output.innerHTML=result;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
Num1: <input type="text" id="number1" />
Num2: <input type="text" id="number2" />
<div id="output"></div>
<button id="add" onclick="add()">Add</button>
</body>
</script>
</html>
i want to calculate the sum of two input text field when user clicks the add button.But when I did
console.log(k); I am getting zero.I dont know hoe it became zero.I also searched how to take the value from text field and they way to take is using document.getElementById("id").value.I have done the same but my result is not coming.
Get the value of k & l inside the add function. That is because before clicking the button those values are empty
var num1 = document.getElementById("number1");
var num2 = document.getElementById("number2");
function add() {
var k = Number(num1.value);
var l = Number(num2.value);
onCout(k, l, function result(a, b) {
return a + b;
});
}
function onCout(c, d, callback) {
var result = callback(c, d);
output.innerHTML = result;
}
Num1: <input type="text" id="number1" /> Num2: <input type="text" id="number2" />
<div id="output"></div>
<button id="add" onclick="add()">Add</button>
You are getting 0 because initially the fields are empty and Number('') will give 0
var num1 = document.getElementById("number1");
var num2 = document.getElementById("number2");
var k = Number(num1.value);
var l = Number(num2.value);
console.log(num1.value, num2.value) // value is empty string
console.log(k, l); // NUmber('') is 0
function add() {
onCout(k, l, function result(a, b) {
return a + b;
});
}
function onCout(c, d, callback) {
var result = callback(c, d);
output.innerHTML = result;
}
Num1: <input type="text" id="number1" /> Num2: <input type="text" id="number2" />
<div id="output"></div>
<button id="add" onclick="add()">Add</button>
You are getting 0 because youre getting the values of k and l on page load and not inside your add function which gets called on button click.
You should get the updated values inside the function instead of getting the initials one on load, this can be done as follows:
function add(){
var k=Number(num1.value);
var l=Number(num2.value);
onCout(k,l,function result(a,b){
return a+b;
});
}
var k=Number(num1.value);
var l=Number(num2.value);
the value must be fetched inside the function add(), as the values will be dynamic.
In the code shown in question, values are fetched only once which makes them pointing to initial only and not change dynamically with user input
var num1=document.getElementById("number1");
var num2=document.getElementById("number2");
function add(){
var k=Number(num1.value);
var l=Number(num2.value);
onCout(k,l,function result(a,b){
return a+b;
});
}
function onCout(c,d,callback){
var result=callback(c,d);
output.innerHTML=result;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
Num1: <input type="text" id="number1" />
Num2: <input type="text" id="number2" />
<div id="output"></div>
<button id="add" onclick="add()">Add</button>
</body>
</script>
</html>
Hi i want to get what the user wrote, multiply it by some number and display the result in heading.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="text" id="number" name="num" value="">
<div id = "output">
<h2 id="OP"></h2>
</div>
</body>
</html>
var valResult = parseInt(document.getElementById("number").value);
var num = 5;
var results = valResult + num;
if (valResult == 10){
document.getElementById("OP").innerHTML = results;
}
You have some unnecessary code. Do you really need:
if (valResult == 10){....
Try the following:
function calculate(input){
var valResult = parseInt(input.value);
var num = 5;
var results = valResult * num;
document.getElementById("OP").innerHTML = results;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="text" id="number" name="num" oninput="calculate(this)">
<div id = "output">
<h2 id="OP"></h2>
</div>
</body>
</html>
I have this code that I'm working on, but the calculate button won't work no matter what I do. I want to find the cost per square inch using the pizzaSize and pizzaCost. How can I make the calculate button actually calculate?
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' >
<title> Pizza Calculator </title>
<script src="pizzaCalc.js">
</script>
</head>
<body>
<h1>Pizza Calculator</h1>
<p>
<label for="priceBox">Cost: </label><input type="text" id="priceBox" size="5"/></p>
<p>
<label for="sizeBox">Diameter :</label><input type="text" id="sizeBox"
size="5"/>
</p>
<input type="button" id="cpsi" value="Cost PSI" onclick="calculate(cpsi)">
</body>
</html>
"use strict"
function pizzaCalc () {
var size = document.getElementById ("sizeBox").value;
size = parseFloat (size);
var price = document.getElementById("priceBox").value;
price = parceFloat (price);
var costPerSquareInch = price / (3.14 * (size / 2)^2)
alert('Pizza value :' +costPerSquareInch);
document.getElementById("cpsi").value = costPerSquareInch;
}
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' >
<title> Pizza Calculator </title>
<script src="pizzaCalc.js">
</script>
</head>
<body>
<h1>Pizza Calculator</h1>
<p>
<label for="priceBox">Cost: </label><input type="text" id="priceBox" value="5"/></p>
<p>
<label for="sizeBox">Diameter :</label><input type="text" id="sizeBox" value="5"/>
</p>
<input type="button" id="cpsi" value="Cost PSI" onclick="pizzaCalc()">
<script type="text/javascript">
"use strict"
function pizzaCalc () {
var size = document.getElementById ("sizeBox").value;
size = parseFloat (size);
var price = document.getElementById("priceBox").value;
price = parseFloat (price);
var costPerSquareInch = price / (3.14 * (size / 2)^2)
alert('Pizza value :' +costPerSquareInch);
document.getElementById("cpsi").value = costPerSquareInch;
}
</script>
</body>
</html>
It appears that
<input type="button" id="cpsi" value="Cost PSI" onclick="calculate(cpsi)">
should be
<input type="button" id="cpsi" value="Cost PSI" onclick="pizzaCalc()">
also I am assuming size should be value on the input tags.
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' >
<title> Pizza Calculator </title>
<script src="pizzaCalc.js">
</script>
</head>
<body>
<h1>Pizza Calculator</h1>
<p>
<label for="priceBox">Cost: </label><input type="text" id="priceBox" value="5"/></p>
<p>
<label for="sizeBox">Diameter :</label><input type="text" id="sizeBox" value="5"/>
</p>
<input type="button" id="cpsi" value="Cost PSI" onclick="pizzaCalc()">
<script type="text/javascript">
"use strict"
function pizzaCalc () {
var size = document.getElementById ("sizeBox").value;
size = parseFloat (size);
var price = document.getElementById("priceBox").value;
price = parseFloat (price);
var costPerSquareInch = price / (3.14 * (size / 2)^2)
alert('Pizza value :' +costPerSquareInch);
document.getElementById("cpsi").value = costPerSquareInch;