I've been trying to figure out what is wrong with my code, I need to add the products (bananas, sodas, chips, candy) then multiply it with 10% tax given. Am I missing the variables for those products? I know something is missing but I don't know what to do!
<html>
<head>
<title>Total Calculator</title>
</head>
<body>
<p>
Bananas: <input type="text" id="bananasBox" value="" /> at $ 0.50 a piece<br/>
Sodas: <input type="text" id="sodasBox" value="" /> at $ 0.75 per can<br/>
Chips: <input type="text" id="chipsBox" value="" /> at $1.25 per bag<br/>
Candy: <input type="text" id="candyBox" value="" /> at $1.00 per pack<br/>
TAX is 10 %
</p>
<button id="Calculate" onclick= "Calculate()" value="Calculate">Calculate</button>
<script>
function Calculate(){
var total = 0;
var cost = document.getElementById("cost").value;
var tax = document.getElementById("tax").value;
total = cost * tax;
document.getElementById("total").value = total;
document.getElementById("outputDiv").innerHTML= "Your TOTAL is: " + total;
}
</script>
<hr/>
<div id="outputDiv">
</div>
</body>
</html>
I don't think you really put forth any effort, but here's a correct answer:
<html>
<head>
<title> Total Calculator </title>
</head>
<body>
<p>
Bananas: <input type="text" id="bananasBox" value=""> at $ 0.50 a piece<br>
Sodas : <input type="text" id="sodasBox" value=""> at $ 0.75 per can<br>
Chips : <input type="text" id="chipsBox" value=""> at $1.25 per bag<br>
Candy : <input type="text" id="candyBox" value=""> at $1.00 per pack<br>
TAX is 10 %
</p>
<input type="button" value="Calculate" id='Calculate' onclick= "Calculate()">
<script type="text/javascript">
function Calculate() {
var total = 0;
var bananas = Number(document.getElementById("bananasBox").value) * .5;
var sodas = Number(document.getElementById("sodasBox").value) * .75;
var chips = Number(document.getElementById("chipsBox").value) * 1.25;
var candy = Number(document.getElementById("candyBox").value) * 1;
var tax = 0.10;
total = (bananas+sodas+chips+candy)*(1+tax);
document.getElementById('outputDiv').innerHTML= 'Your TOTAL is: $' + Number(total).toFixed(2);
}
</script>
<hr>
<div id="outputDiv">
</div>
</body>
</html>
If you want me to explain it I will, but if you don't really have any intention in learning: it wouldn't be worth wasting my time.
Related
Hello Stack Overflowers. I have an on going assignment in my HTML class. I currently have already created 4 simple intro pages for it but currently stuck on this very simple JavaScript calculation. I feel like I am close however. Please excuse my messy code. I am by all means of the term a "noob" at JS, but I am trying. Any help is appreciated.
My prompt is to:
"Create a page to allow the choice of an equipment from a short list and then allow selections of rental starting date and ending date and then calculate the number of days between the 2 selected dates. Finally, multiply the unit rental cost with the number of days and add 8% tax for the total cost."
My Code:
<html>
<head>
<title> Rental Program </title>
<script language="javascript">
//listbox.htm
function processit() {
string1=document.myform.numb1.value;
numb2=document.myform.alist.selectedIndex;
perweek=0;
if (string1 == 'Books') { perweek=300; }
if (string1 == 'Calculator') { perweek=200; }
if (string1 == 'Computer') { perweek=100; }
if (string1 == 'Camera') { perweek= 50; }
}
</script>
</head>
<body
<form name=myform>
<h4>Enter the item you wish to rent using the list below:
<input size =12 type="text" name="numb1">
</h4>
<li> Books = $300 per week
<li> Calculator = $200 per week
<li> Computer = $100 per week
<li> Camera = $50 per week
<h4> Select how many weeks you wish to rent: </h4>
<p>
</form>
</body>
<html>
<head>
<script type="text/javascript">
function GetDays(){
var dropdt = new Date(document.getElementById("drop_date").value);
var pickdt = new Date(document.getElementById("pick_date").value);
return parseInt((dropdt - pickdt) / (24 * 3600 * 1000));
}
function cal(){
if(document.getElementById("drop_date")){
document.getElementById("numdays2").value=GetDays();
}
function GetTotal(){
var total = ($('[numb1]').val()(*0.8*total));
}
</script>
</head>
<body>
<div id="reserve_form">
<div id="pickup_date"><p><label class="form">Pickup Date:</label><input type="date" class="textbox" id="pick_date" name="pickup_date" onchange="cal()"</p></div>
<div id="dropoff_date"><p><label class="form">Dropoff Date:</label><input type="date" class="textbox" id="drop_date" name="dropoff_date" onchange="cal()"/></p></div>
<div id="numdays"><label class="form">Number of days:</label><input type="text" class="textbox" id="numdays2" name="numdays"/></div>
<h5>Total Amount in $ </h5>
<input size =12 type="text" name="total">
<p>
</div>
</body>
</html>
Error on line number 70. You also forgot to terminate the if statement
if(document.getElementById("drop_date")){
WORKING CODE:
<html>
<head>
<title> Rental Program </title>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script language="javascript">
//listbox.htm
function processit() {
string1=document.getElementById("numb1").value;
//numb2=document.myform.alist.selectedIndex;
perweek=0;
if (string1 == 'Books') { perweek=300; }
if (string1 == 'Calculator') { perweek=200; }
if (string1 == 'Computer') { perweek=100; }
if (string1 == 'Camera') { perweek= 50; }
return perweek
}
</script>
</head>
<body
<form name=myform>
<h4>Enter the price of the item you wish to rent using the list below:
<input size =12 type="text" name="numb1" id="numb1">
</h4>
<li> Books = $300 per week
<li> Calculator = $200 per week
<li> Computer = $100 per week
<li> Camera = $50 per week
<h4> Select how many weeks you wish to rent: </h4>
<p>
</form>
</body>
<html>
<head>
<script type="text/javascript">
var items = {
"Book":"300"
}
function GetDays(){
var dropdt = new Date(document.getElementById("drop_date").value);
var pickdt = new Date(document.getElementById("pick_date").value);
return parseInt((dropdt - pickdt) / (24 * 3600 * 1000));
}
function cal(){
if(document.getElementById("drop_date")){
var result = GetDays()
if(isNaN(result)){result="Please fill out both dates"}
document.getElementById("numdays2").value=result;
}
}
function GetTotal(){
var price = processit(document.getElementById("numb1").value)
var duration = document.getElementById("numdays2").value
var total = Math.floor((price*(0.8*(duration)))*100)/100;
if(isNaN(total)){total="Please fill out both dates"}
document.getElementById("total").value = total
}
</script>
</head>
<body>
<div id="reserve_form">
<div id="pickup_date"><p><label class="form">Pickup Date:</label><input type="date" class="textbox" id="pick_date" name="pickup_date" onchange="cal();GetTotal()"/></p></div>
<div id="dropoff_date"><p><label class="form">Dropoff Date:</label><input type="date" class="textbox" id="drop_date" name="dropoff_date" onchange="cal();GetTotal()"/></p></div>
<div id="numdays"><label class="form">Number of days:</label><input type="text" class="textbox" id="numdays2" name="numdays" disabled/></div>
<h5>Total Amount in $ </h5>
<input size =12 type="text" name="total" id="total" disabled>
<p>
</div>
</body>
</html>
I have been trying to get a random number generator for the numbers to be between the two inputs. I have a code
<form action="/action_page.php">
<input type="number" name="low" id="low" placeholder="lowest number" value="1"><br>
<input type="number" name="high" id="high" placeholder="highest number" value="10"><br>
<input type="button" value="Submit" onclick="myFunction()">
</form>
<p id="randnum"></p>
<script>
function myFunction() {
var x = document.getElementById("randnum")
x.innerHTML = Math.floor((Math.random() * 'low') + 'high');
}
</script>
As you would have noticed, I have the javascript in the one code.
where I put in 'low' and 'high' works with a fixed number
You need to get the value of the inputs and apply them to the calculations. - note that i am using parseInt() to convert the input values to numbers. Also - using 1 will as the low value will always yield are result of 10 since your getting the math.floor - which will equate to 0 - so 0 + 10 = 10.
Based on #Quentins comment - i alered the caluclation to suit your numbers.
function myFunction() {
var x = document.getElementById("randnum");
var high = parseInt(document.getElementById("high").value);
var low = parseInt(document.getElementById("low").value);
x.innerHTML = Math.floor(Math.random()*(high-low+1)+low)
}
<form action="/action_page.php">
<input type="number" name="low" id="low" placeholder="lowest number" value="1"><br>
<input type="number" name="high" id="high" placeholder="highest number" value="10"><br>
<input type="button" value="Submit" onclick="myFunction()">
</form>
<p id="randnum"></p>
<form action="/action_page.php">
<input type="number" name="low" id="low" placeholder="lowest number" value="1"><br>
<input type="number" name="high" id="high" placeholder="highest number" value="10"><br>
<input type="button" value="Submit" onclick="myFunction()">
</form>
<p id="randnum"></p>
<script>
myFunction = () => {
let min = parseInt(low.value, 0);
let max = parseInt(high.value, 0);
let x = document.getElementById("randnum")
x.innerHTML = Math.floor(Math.random() * (max - min)) + min;
}
</script>
I think this will help.
<form action="/action_page.php">
<input type="number" name="low" id="low" placeholder="lowest number" value="1"><br>
<input type="number" name="high" id="high" placeholder="highest number" value="10"><br>
<input type="button" value="Submit" onclick="myFunction()">
</form>
<p id="randnum"></p>
<script>
function myFunction() {
var x = document.getElementById("randnum")
var low = document.getElementById("low").value;
var high = document.getElementById("high").value;
x.innerHTML = Math.floor((Math.random() * low) + high);
}
</script>
var max = parseInt($("#high")[0].value);
var min = parseInt($("#low")[0].value);
x.innerHTML = Math.floor(Math.random() * max) + min;
First, in (Math.random() * 'low') + 'high', low and high are not really the integer values.
Second, a very IMPORTANT issue others did not mention is that Math.random() returns a double value between 0 and 1. If you follow some of the other answers, the random number will always be 0.
use this:
<form action="/action_page.php">
<input type="number" name="low" id="low" placeholder="lowest number"
value="1"><br>
<input type="number" name="high" id="high" placeholder="highest number"
value="10"><br>
<input type="button" value="Submit" onclick="myFunction()">
</form>
<p id="randnum"></p>
<script>
function myFunction() {
var x = document.getElementById("randnum")
var low = document.getElementById("low").value;
var high = document.getElementById("high").value;
var random = Math.random();
x.innerHTML = Math.floor(random * (high-low) + high);
}
</script>
I am trying to make an annual salary calculator using Javascript. Here is what I have so far:
<div id="fulldiv">
<p> Enter the following information to calculate your annual salary.</p>
<p>Hourly Wage:
<input type="text" name="wage" id="txt_wage" value ="0.00"/></p>
<p>Hours Per Week:
<input type="text" name="hours" id="txt_hours" value= "0.0"/> <br/><br/>
<button value="calculate" onclick="calcSalary()">Calculate</button></p>
<p id="results"></p>
<script type="text/javascript">
function calcSalary() {
var wage_element = document.getElementById('txt_wage');
var wage = parseInt(wage_element.value);
var hours_element = document.getElementById('txt_hours');
var hours = parseInt(hours_element.value);
var calculate = wage_element * hours_element * 52;
document.getElementByID('results').innerHTML = calculate;
}
</script>
</div>
When I click the button, nothing happens. Any thoughts?
Some typos in there. I have slightly rewritten and simplified the code to ensure the a) your calculations are on the value of the inputs and b) you are using labels to provide the text relative to the inputs - not p's.
function calcSalary() {
var wage = parseFloat(document.getElementById('txt_wage').value);
var hours = parseFloat(document.getElementById('txt_hours').value);
var calculate = wage * hours * 52;
document.getElementById('results').innerHTML = calculate;
}
<div id="fulldiv">
<p> Enter the following information to calculate your annual salary.</p>
<label for="txt_wage">Hourly Wage:</label>
<input type="text" name="wage" id="txt_wage" value ="0.00"/>
<label for="txt_hours">Hours Per Week:</label>
<input type="text" name="hours" id="txt_hours" value= "0.0"/>
<br/><br/>
<button value="calculate" onclick="calcSalary()">Calculate</button>
<p id="results"></p>
</div>
You code needs to be adjusted
var calculate = wage_element * hours_element * 52;
Should be changed into
var calculate = wage * hours * 52;
The problem is that you're calculating the element instead of the values.
#Gerard beat me to it by a minute, but here's the working code.
<div id="fulldiv">
<p> Enter the following information to calculate your annual salary.</p>
<p>Hourly Wage:
<input type="text" name="wage" id="txt_wage" value ="0.00"/></p>
<p>Hours Per Week:
<input type="text" name="hours" id="txt_hours" value= "0.0"/> <br/><br/>
<button value="calculate" onclick="calcSalary()">Calculate</button></p>
<p id="results"></p>
<script type="text/javascript">
function calcSalary() {
var wage_element = document.getElementById('txt_wage');
var wage = parseInt(wage_element.value);
var hours_element = document.getElementById('txt_hours');
var hours = parseInt(hours_element.value);
var calculate = wage * hours * 52;
document.getElementById('results').innerHTML = calculate;
}
</script>
</div>
I have a input field that is readonly that shows the user the money they have left over after spending. They first have to enter their income and in the spending field, it will show the value from the database. My problem is after calculating the money left over in javascript, the value does not show in the leftOver field. I am not sure what I am doing wrong. Here is my code:
<script type="text/javascript">
$(document).ready(function(){
$("#addRecord").hide();
$("#btnAdd").click(function(){
$("#addRecord").show();
});
});
</script>
<script type="text/javascript">
function getTotalIncome(){
var income = parseFloat(document.getElementById("income").value);
var otherIncome = parseFloat(document.getElementById("otherIncome").value);
var totalIncome = income + otherIncome;
document.getElementById("totalIncome").value = '$' + totalIncome;
}
</script>
<script type="text/javascript">
function getLeftOver(){
var totalIncome = parseFloat(document.getElementById("totalIncome").value);
var totalSpending = parseFloat(document.getElementById("totalSpending").value);
var leftOver = totalIncome - totalSpending;
document.getElementById("leftOver").value = '$' + leftOver;
}
</script>
</head>
<body>
<button id="btnAdd" type="button" name="btnAdd">Create A Budget</button>
<form id="addRecord" name="addRecord" action="Budget" method="post">
<h3>Income</h3>
<label>Income:</label>
<input type="text" name="income" id="income" onchange="getTotalIncome()"> <br>
<label>Other Income:</label>
<input type="text" name="otherIncome" id="otherIncome" onchange="getTotalIncome()"><br>
<hr>
<h3>Spending</h3>
<label>Total Amount Of Spending</label>
<input type="text" name="totalSpending" value="$${totalSpending}" disabled=disabled>
<hr>
<h4>You've budgeted</h4>
<label>Income</label>
<input type="text" name="totalIncome" id="totalIncome" readonly="readonly" onchange="getLeftOver()">
<label>Spending</label>
<input type="text" name="totalSpending" id="totalSpending" value="$${totalSpending}" readonly="readonly" onchange="getLeftOver()">
<label>Left Over</label>
<input type="text" name="leftOver" id="leftOver" readonly="readonly">
</form>
</body>
Updated code. calculate() still not working. The monthly payment amount is ultimately not being passed to the "total" id box. Does anyone see what the underlying problem is here? My syntax seems to be correct, I believe there may be a problem with my specification of where each variable is applied in the code.
I am having problems getting the function calculate() to pass the correct result in "total." Any possible solutions? The action of clicking the calculate button should display the total, but is displaying nothing at all, as if the button does not activate the calculate function at all.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function calculate() {
var P = document.getElementById("price").value;
var D = document.getElementById("DP").value;
var R = document.getElementById("R").value;
var N = document.getElementById("N").value;
var i = (R / 1200);
var n = (N * 12);
var m = ((P - D) * i * Math.pow(1 + i,n)) / (Math.pow(1 + i,n) - 1);
var result = document.getElementById('total');
result.value = m;}
</script>
</head>
<div align="center">
<hr>
<form name id="Main">
<input type="number" id="price" placeholder="Price of the Car"/>
<br>
<br>
<input type="number" id="DP" placeholder="Down Payment"/>
<br>
<br>
<input type="number" id="R" placeholder="Annual % Rate"/>
<br>
<br>
<input type="number" id="N" placeholder="# of Years Loaned"/>
<br>
<br>
<input type="button" id="calculate" value="Calculate" onclick="javascript:calculate();"/>
<br>
<br>
<input type="number" id="total" placeholder="Total Cost..." readonly=""/>
<br>
<br>
<input type="reset" value="Reset">
</form>
<hr>
</div>
</html>
Use Math.pow() function instead. The ^ operator is not for mathematical power operations (see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_XOR and https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/pow).
Also, It's result.value = m, not the other way around :)
Also 2: R and M seem undefined to me, you have to initialize those variables with something, like you did with P and D.
Also 3: use chrome dev tools or anything like that. It will make your life much easier. Remember, javascript doesn't mean "no IDE" :D
Unfortunately, your original code will never work, as it has too many errors.
Here is the corrected fiddle for you, please, have a look:
http://jsfiddle.net/q330fqw8/
function calculate() {
var P = document.getElementById("price").value;
var D = document.getElementById("DP").value;
var R = document.getElementById("R").value;
var N = document.getElementById("N").value;
var i = (R / 1200);
var n = (N * 12);
var m = ((P - D) * i * Math.pow(1 + i,n)) / (Math.pow(1 + i,n) - 1);
var result = document.getElementById('total');
result.value = m;
}
I removed id="calculate" in HTML, because of this: Why JS function name conflicts with element ID?
In Javascript, the 4 variables P,D,R,N should be set properly. Finally, this m.value = result; -> result.value = m;
but I guess, you've already corrected some errors in the question. I worked with your original code.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function calculate() {
var P = document.getElementById("price").value;
var D = document.getElementById("DP").value;
var R = document.getElementById("R").value;
var N = document.getElementById("N").value;
var i = (R / 1200);
var n = (N * 12);
var m = ((P - D) * i * Math.pow(1 + i,n)) / (Math.pow(1 + i,n) - 1);
var result = document.getElementById('total');
result.value = m;}
</script>
</head>
<div align="center">
<hr/>
<form id="Main">
<input type="number" id="price" placeholder="Price of the Car" />
<br />
<br/>
<input type="number" id="DP" placeholder="Down Payment" />
<br/>
<br/>
<input type="number" id="R" placeholder="Annual % Rate" />
<br/>
<br/>
<input type="number" id="N" placeholder="# of Years Loaned" />
<br/>
<br/>
<input type="button" value="Calculate Monthly Payment" onclick="calculate();" />
<br/>
<br/>
Total Monthly Payment:<input type="number" id="total" placeholder="Total Cost..." readonly="" />
<br/>
<br/>
<input type="reset" value="Reset" />
</form>
<hr/>
</div>