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>
Related
I'm really new to JS. I am working on the if else statement and returning the total using the button. I also want to return some other input from HTML file also using the same button or on the same function as my calculate function. How do I return the total amount, name(input), number(input), from html to that one button as well?
If you don't get my question please run the code and see that it is not printing out the other input value. Thank you for helping me out.
function calculate() {
var total
var kwh = parseFloat(document.getElementById("kw").value);
if (kwh <= 50) {
total = (kwh * 500);
} else if (kwh <= 100) {
total = kwh * 1000;
} else {
total = kwh * 2120;
}
document.getElementById("total").innerHTML = total;
}
<body>
<div>
<label>ឈ្មោះអតិថិជន:</label>
<input id="name" type="text" placeholder="ឈ្មោះអតិថិជន">
</div>
<div>
<label>ឈ្មោះអតិថិជន:</label>
<input type="number" placeholder="លេខអតិថិជន">
</div>
<div>
<label>ឈ្មោះអតិថិជន:</label>
<input type="number" placeholder="kwh" id="kw">
</div>
<button type="button" onclick="calculate()">គណនា</button>
<p>Result: <span id="total"></span></p>
<p>Name: <span id="name"></span></p>
<!-- <script src="script2.js"></script> -->
</body>
You are very close just need a few tweaks.
You shouldn't repeat ids, so in that case, to make it easier to understand, we can rename the input with id name to name_input, so you can retrieve its value as
document.getElementById('name_input').value
You can add that to your function and assign it to the innerHTML of name inside the function calculate() and so on with as many actions as you want
Working snippet:
function calculate() {
var total
var kwh = parseFloat(document.getElementById("kw").value);
if (kwh <= 50) {
total = (kwh * 500);
} else if (kwh <= 100) {
total = kwh * 1000;
} else {
total = kwh * 2120;
}
document.getElementById("total").innerHTML = total;
document.getElementById("name").innerHTML = document.getElementById("name_input").value;
}
<body>
<div>
<label>ឈ្មោះអតិថិជន:</label>
<input id="name_input" type="text" placeholder="ឈ្មោះអតិថិជន">
</div>
<div>
<label>ឈ្មោះអតិថិជន:</label>
<input type="number" placeholder="លេខអតិថិជន">
</div>
<div>
<label>ឈ្មោះអតិថិជន:</label>
<input type="number" placeholder="kwh" id="kw">
</div>
<button type="button" onclick="calculate()">គណនា</button>
<p>Result: <span id="total"></span></p>
<p>Name: <span id="name"></span></p>
<!-- <script src="script2.js"></script> -->
</body>
I'm working on a tax calculator using HTML and Javascript. It needs to accept two user inputs ("Total owed" and "Your payment") and calculate what percentage "Your payment" is of "Total owed". Then they should be displayed within the "answerParagraph" tag. What is the best way to do this?
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="getPercentage">
<div id="total">
Total owed:
<input id="totalInput" type="text">
</div>
<div id="payment">
Your payment:
<input id="paymentInput" type="text">
</div>
<button onclick="handlers.getPercentage()">Get percentage</button>
</div>
<div>
<p id="answerParagraph">
</p>
</div>
<script>
var taxes = {
getPercentage: function(total, payment) {
var percentage = (Math.floor((payment / total) * 100));
},
}
var handlers = {
getPercentage: function() {
var totalInput = document.getElementById('totalInput');
var paymentInput = document.getElementById('paymentInput');
var answer = taxes.getPercentage(totalInput.value, paymentInput.value);
}
}
</script>
</body>
</html>
You have to return the answer from taxes.getPercentage function
getPercentage: function (total, payment) {
var percentage = (Math.floor((payment / total) * 100));
return percentage;
}
And display in your answerParagraph. So, in handlers.getPercentage :
...
var answer = taxes.getPercentage(totalInput.value, paymentInput.value);
answerParagraph.innerHTML = answer;
the following modified code should work
var taxes = {
getPercentage: function(total, payment) {
var percentage = (Math.floor((payment / total) * 100));
return percentage
},
}
var handlers = {
getPercentage: function() {
var totalInput = document.getElementById('totalInput');
var paymentInput = document.getElementById('paymentInput');
var answer = taxes.getPercentage(totalInput.value, paymentInput.value);
document.getElementById('answerParagraph').innerHTML = answer
}
}
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="getPercentage">
<div id="total">
Total owed:
<input id="totalInput" type="text">
</div>
<div id="payment">
Your payment:
<input id="paymentInput" type="text">
</div>
<button onclick="handlers.getPercentage()">Get percentage</button>
</div>
<div>
<p id="answerParagraph">
</p>
</div>
<script>
</script>
</body>
</html>
You can leave out the button if you trigger the calcpercentage() function by the keyup-event on either of the two input fields:
// define shorthand notation byId(id):
const byId=id=>document.getElementById(id);
// delegated event binding: affects INPUT elements only
byId('getPercentage').addEventListener('keyup',function(ev){
if(ev.target.tagName!='INPUT') return false;
byId('answerParagraph').innerHTML=
(byId('paymentInput').value*100 /
byId('totalInput').value).toFixed(2)+"%";
});
// trigger event manually ...
byId('totalInput').dispatchEvent(new Event('keyup',{bubbles:true}));
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="getPercentage">
<div id="total">
Total owed:
<input id="totalInput" type="text" value="1000">
</div>
<div id="payment">
Your payment:
<input id="paymentInput" type="text" value="25">
</div>
</div>
<div>
<p id="answerParagraph">
</p>
</div>
<script>
</script>
</body>
</html>
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>
Furthermore,I also realize that the values typed before clicking 'calculate' are disappear also.Until now I still cannot find the errors because I think my formula in calculating mortgage loan is correct.
HTML code:
<html>
<head>
<script src="cal_mortgage.js" type="text/javascript"></script>
</head>
<body>
<form>
<table>
<h2>mortgage calculator:</h2>
<tr><td>principal</td><td><input type="text" id="principal"/></td></tr>
<tr><td>interest %</td><td><input type="text" id="interest"/></td></tr>
<tr><td>term (year)</td><td><input type="text" id="term"/></td></tr><p></p>
<tr><td><input type="submit" value="calculate" onclick="cal_mortgage()"/></td><td></td></tr>
<tr><td>monthly payment</td><td><input type="text" id="monthly_pay"/></td></tr>
</table>
</form>
</body>
</html>
JavaScript code:
function cal_mortgage()
{
var PR = form.principal.value; /*present value of the mortgage loan*/
var IN = (form.interest.value / 100) / 12; /*interest rate of the mortgage loan*/
var PE = form.term.value * 12; /*number of periods of the mortgage loan*/
var PAY = (PR * IN) / (1 - Math.pow(1 + IN, -PE)); /*regular payment to apply to the mortgage loan*/
form.monthly_pay.value = PAY;
}
This seems to work. But I haven't checked the mathematics:
<html>
<head>
<script src="cal_mortgage.js" type="text/javascript"></script>
</head>
<body>
<form>
<table>
<h2>mortgage calculator:</h2>
<tr><td>principal</td><td><input type="text" id="principal" /></td></tr>
<tr><td>interest %</td><td><input type="text" id="interest" /></td></tr>
<tr><td>term (year)</td><td><input type="text" id="term" /></td></tr><p></p>
<tr><td><input type="button" value="calculate" onclick="cal_mortgage()" /></td><td></td></tr>
<tr><td>monthly payment</td><td><input type="text" id="monthly_pay" /></td></tr>
</table>
</form>
<script>
function cal_mortgage()
{
var PR = document.getElementById("principal").value; /*present value of the mortgage loan*/
var IN = (document.getElementById("interest").value / 100) / 12; /*interest rate of the mortgage loan*/
var PE = document.getElementById("term").value * 12; /*number of periods of the mortgage loan*/
var PAY = (PR * IN) / (1 - Math.pow(1 + IN, -PE)); /*regular payment to apply to the mortgage loan*/
document.getElementById("monthly_pay").value = PAY;
}
</script>
</body>
</html>
In your html file, change <form> to <form id="Calculate"> and change button type from submit to button
In your javascript cal_mortgage() function, add this as your first line:
form = document.getElementById("Calculate")
Now it should work
NEW CODE:
function cal_mortgage()
{
form = document.getElementById('Calculate')
var PR = form.principal.value; /*present value of the mortgage loan*/
var IN = (form.interest.value / 100) / 12; /*interest rate of the mortgage loan*/
var PE = form.term.value * 12; /*number of periods of the mortgage loan*/
var PAY = (PR * IN) / (1 - Math.pow(1 + IN, -PE)); /*regular payment to apply to the mortgage loan*/
form.monthly_pay.value = PAY;
}
<html>
<head>
<script src="cal_mortgage.js" type="text/javascript"></script>
</head>
<body>
<form id="Calculate">
<table>
<h2>mortgage calculator:</h2>
<tr><td>principal</td><td><input type="text" id="principal"/></td></tr>
<tr><td>interest %</td><td><input type="text" id="interest"/></td></tr>
<tr><td>term (year)</td><td><input type="text" id="term"/></td></tr><p></p>
<tr><td><input type="button" value="calculate" onclick="cal_mortgage()"/></td><td></td></tr>
<tr><td>monthly payment</td><td><input type="text" id="monthly_pay"/></td></tr>
</table>
</form>
</body>
</html>
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.