I am new to Javascript and just getting into it for my web design class. I am working on a project with Javascript inside HTML. I have it all written, but the HTML doesn't seem to call the Javascript function. I've been searching for a solution but can't seem to get anything to work. The code is:
<html>
<head>
<script>
var calculateInterest = function(){
var rate;
var total;
var years = document.getElementById("years").value;
var principleAmount = document.getElementById("principal").value;
var interestRate = document.getElementById("intrest").value;
if ((interestRate >= 0) && (interestRate <= 15)) {
rate = interestRate / 100;
if ((principleAmount >= 0) && (principleAmount <= 10000)) {
total = principleAmount * (1 + rate * years);
document.getElementById("total_with_intrest").value = total;
}
else {
message-box ("Invalid data for principle amount.");
}
}
else {
message-box ("Invalid data for interest rate.");
}
}
</script>
<style>
form{ border: solid blue;
width:40em;
padding:0.5em;}
input{padding: 0.5em;}
</style>
</head>
<body>
<form>
Enter Principal Ammount : <input type="text" id ="principal" />
</br>
Enter Intrest Rate : <input type="text" id ="intrest" />
</br>
Enter Number of Years : <input type="text" id ="years" />
</br>
Grand Ammount : <input type="text" id ="total_with_intrest" disabled /></br>
</br>
<input type="button" id="click" value="Calculate" onclick=calculateInterest()/> </br>
</form>
</body>
</html>
The browser error is "SyntaxError: expected expression, got '}' " on line 2 but I just can't see what the issue is. Any help is greatly appreciated!
Side note, I am aware there are some weird spelling mistakes. My instructor is from India and not totally fluent in English. She made the HTML file for us to use and we just have to put in the Javascript.
There is no message-box function. Did you mean alert()? Your code currently works, with those changes:
var calculateInterest = function(){
var rate;
var total;
var years = document.getElementById("years").value;
var principleAmount = document.getElementById("principal").value;
var interestRate = document.getElementById("intrest").value;
if ((interestRate >= 0) && (interestRate <= 15)) {
rate = interestRate / 100;
if ((principleAmount >= 0) && (principleAmount <= 10000)) {
total = principleAmount * (1 + rate * years);
document.getElementById("total_with_intrest").value = total;
}
else {
alert("Invalid data for principle amount.");
}
}
else {
alert("Invalid data for interest rate.");
}
}
form{ border: solid blue;
width:40em;
padding:0.5em;}
input{padding: 0.5em;}
<form>
Enter Principal Amount : <input type="text" id ="principal" />
</br>
Enter Interest Rate : <input type="text" id ="intrest" />
</br>
Enter Number of Years : <input type="text" id ="years" />
</br>
Grand Amount : <input type="text" id ="total_with_intrest" disabled /></br>
</br>
<input type="button" id="click" value="Calculate" onclick="calculateInterest()" /> </br>
</form>
Small Nitpick: Fixed some small typos not related to code. Ammount => Amount. Intrest => Interest.
Related
I'm not sure what I'm doing wrong here. It says that my variables are not defined, but I did that at the top of the js file. I think all my logic is correct, but something is not right somewhere I haven't been able to figure out what it is. I'm just adding more text here so it will let me edit this question with updated coded. Delete this last bit as needed. Thanks.
function calculate() {
document.getElementById("cost").innerHTML = "Cost: "
var cost = Number(document.getElementById("type").value);
var years = Number(document.getElementById("years").value);
if (years > 1) {
var discount = cost * 0.20
cost -= discount ; // 20%
document.getElementById("cost").innerHTML += cost;
} else {
document.getElementById("cost").innerHTML += cost;
}
return false;
}
I made two changes and it runs without error:
var cost = parseInt(document.getElementById("cost).value);
Should have another " after cost, and:
if (type && type.value && years && (years > 0)) {
should be years.value > 0
Then change the switch to:
switch (type.value) {
and the cases to:
case 'basic':
case 'premium':
etc.
function calculate() {
// Be strict:
'use strict';
// Variable to store the total cost:
var cost;
// Get a reference to the form elements:
var type = document.getElementById('type');
var years = document.getElementById('years');
// TODO Convert the year to a number:
// Check for valid data:
if (type && type.value && years && (years.value > 0)) {
// TODO Add a switch statement to determine the base cost using the value of "type"
switch (type.value) {
case 'basic':
window.console.log("Basic - $10.00");
break;
case 'premium':
window.console.log("Premium - $15.00");
break;
case 'gold':
window.console.log("Gold - $20.00");
break;
case 'platinum':
window.console.log("Platinum - $25.00");
}
// TODO Update cost to factor in the number of years:
var cost = parseInt(document.getElementById("cost").value);
// Discount multiple years:
if (years > 1) {
cost -= (cost*20); // 20%
}
// TODO update the value property of 'costElement' to the calculated cost
var costElement = document.getElementById('cost');
} else { // Show an error:
document.getElementById('cost').value = 'Please enter valid values.';
}
// Return false to prevent submission:
return false;
}
function init() {
'use strict';
// call a function named calculate() when form submitted
document.getElementById('theForm').onsubmit = calculate;
}
window.onload = init;
<!DOCTYPE html>
<html>
<head>
<title>58123301</title>
<head>
<body>
<div>
<form action="" method="post" id="theForm">
<fieldset><legend>Create Your Membership</legend>
<div><label for="type">Type</label> <select name="type" id="type" required>
<option value="basic">Basic - $10.00</option>
<option value="premium">Premium - $15.00</option>
<option value="gold">Gold - $20.00</option>
<option value="platinum">Platinum - $25.00</option>
</select></div>
<div><label for="years">Years</label><input type="number" name="years" id="years" min="1" required></div>
<div><label for="cost">Cost</label><input type="text" name="cost" id="cost" disabled></div>
<input type="submit" value="Calculate" id="submit">
</fieldset>
</form>
</div>
<script type="text/javascript" src="58123301.js"></script>
</body>
</html>
I worked on your code and I fixed a few issues, hope this will help you:
function calculate() {
document.getElementById("cost").innerHTML = "Cost: "
var cost = Number(document.getElementById("type").value);
var years = Number(document.getElementById("years").value);
if (years > 1) {
var discount = cost * 0.20
cost -= discount ; // 20%
document.getElementById("cost").innerHTML += cost;
} else {
document.getElementById("cost").innerHTML += cost;
}
return false;
}
<form action="" method="post" id="theForm">
<fieldset>
<legend>Create Your Membership</legend>
<div>
<label for="type">Type</label>
<select name="type" id="type" required>
<option value="10.00">Basic - $10.00</option>
<option value="15.00">Premium - $15.00</option>
<option value="20.00">Gold - $20.00</option>
<option value="25.00">Platinum - $25.00</option>
</select>
</div>
<div>
<label for="years">Years</label
><input type="number" name="years" id="years" min="1" required />
</div>
<div>
<p id="cost">Cost: </p>
</div>
<input type="button" value="calculate" id="submit" onclick="calculate()"/>
</fieldset>
</form>
When I run the code on my chrome browser, clicking the calculate button, it does not put the value in the Total and Sales Tax text box.
Also "Add the Javascript event handler for the click event of the Clear button, This should clear all text boxes and move the cursor to the Subtotal field."
I'm using Html and js file. Using a function expression to calculate and display my calculation, then also use the clear button to clear all text boxes.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sales Tax Calculator</title>
<link rel="stylesheet" href="styles.css" />
<script src="sales_tax.js"></script>
</head>
<body>
<main>
<h1>Sales Tax Calculator</h1>
<p>Enter Subtotal and Tax Rate and click "Calculate".</p>
<label for="subtotal">Subtotal:</label>
<input type="text" id="subtotal" ><br>
<label for="tax_rate">Tax Rate:</label>
<input type="text" id="tax_rate" ><br>
<label for="sales_tax">Sales Tax:</label>
<input type="text" id="sales_tax" disabled ><br>
<label for="total">Total:</label>
<input type="text" id="total" disabled ><br>
<label> </label>
<input type="button" id="calculate" value="Calculate" >
<input type="button" id="clear" value="Clear" ><br>
</main>
</body>
</html>
This is my js file.
var $ = function (id) {
return document.getElementById(id);
};
var SumSalesTax = function (sub, rate){
var sales_tax = (sub * rate);
sales_tax = sales_tax.toFixed(2);
var total = (sub * rate + sub);
total = total.toFixed(2);
return sales_tax, total;
}
var processEntries = function() {
var sub = parseFloat($("subtotal").value);
var rate = parseFloat($("tax_rate").value);
if (sub < 0 && sub > 10000 && rate < 0 && rate > 12) {
alert("Subtotal must be > 0 and < 1000, and Tax Rate must be >0 and < 12.
")
} else {
$("sales_tax").value = SumSalesTax(sub, rate);
$("total").value = SumSalesTax(sub, rate);
}
};
window.onload = function() {
$("calculate").onclick = processEntries;
$("clear").onclick = sumSalesTax;
};
Sales Tax Calculator
It seems like you had a typo when you were doing $("clear").onclick = sumSalesTax;, as the variable was named SumSalesTax rather than with the lower case. This meant that the code block errored out and therefore didn't actually run. Make sure you make good use of the browser console so you can spot errors like this! The below example should work
var $ = function (id) {
return document.getElementById(id);
};
var SumSalesTax = function (sub, rate){
var sales_tax = (sub * rate);
sales_tax = sales_tax.toFixed(2);
var total = (sub * rate + sub);
total = total.toFixed(2);
return sales_tax, total;
}
var processEntries = function() {
var sub = parseFloat($("subtotal").value);
var rate = parseFloat($("tax_rate").value);
if (sub < 0 && sub > 10000 && rate < 0 && rate > 12) {
alert("Subtotal must be > 0 and < 1000, and Tax Rate must be >0 and < 12.")
} else {
$("sales_tax").value = SumSalesTax(sub, rate);
$("total").value = SumSalesTax(sub, rate);
}
};
window.onload = function() {
$("calculate").onclick = processEntries;
$("clear").onclick = SumSalesTax;
};
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sales Tax Calculator</title>
<link rel="stylesheet" href="styles.css" />
<script src="sales_tax.js"></script>
</head>
<body>
<main>
<h1>Sales Tax Calculator</h1>
<p>Enter Subtotal and Tax Rate and click "Calculate".</p>
<label for="subtotal">Subtotal:</label>
<input type="text" id="subtotal" ><br>
<label for="tax_rate">Tax Rate:</label>
<input type="text" id="tax_rate" ><br>
<label for="sales_tax">Sales Tax:</label>
<input type="text" id="sales_tax" disabled ><br>
<label for="total">Total:</label>
<input type="text" id="total" disabled ><br>
<label> </label>
<input type="button" id="calculate" value="Calculate" >
<input type="button" id="clear" value="Clear" ><br>
</main>
</body>
</html>
This is a problem for school. I need to make an array of records to store user input that loops the number of times the user specifies.
1 - The user will enter the number of volunteers (between 5-10). I have that part working.
2 - The input form is suppose to display the number of times as the number of volunteers. I'm not sure how to do that.
3 - The user's input is to be stored in an array of records.
4 - A message is to be displayed at the bottom with each volunteer's inputted information.
I'm stuck on number 2 and I'm positive I'll need help with 3 & 4 too.
Any assistance would be greatly appreciated.
You can see the code I've written below and I've included the JS code for both functions that I have working (validateForm() & getNumberOfVolunteers())
function getNumberOfVolunteers() {
var y = document.forms["numberOfVolunteersForm"]["numberOfVolunteers"].value;
if (y == "") {
alert("Number of volunteers must be filled out.");
return false;
}
document.getElementById("numberOfVolunteers1").innerHTML = y;
return false;
}
function validateForm() {
var a = document.forms["inviteForm"]["recipientName"].value;
if (a == "") {
alert("Name must be filled out.");
return false;
}
var b = document.forms["inviteForm"]["organizationName"].value;
if (b == "") {
alert("Organization name must be filled out.");
return false;
}
document.getElementById("recipientName1").textContent = a;
document.getElementById("organizationName1").textContent = b;
return false;
}
<!DOCTYPE html>
<html lang="en-US">
<!--
<head>
<script src="js/getNumberOfVolunteers.js"></script>
</head>
-->
<body>
<header>
</header>
<section id="numOfVolunteers">
<form name="numberOfVolunteersForm" onsubmit="return getNumberOfVolunteers()">
<label for="numberOfVolunteers">Number of volunteers:
</label>
<input type="number" min="5" max="10" value="5" name="numberOfVolunteers" id="numberOfVolunteers" placeholder="Enter the number of volunteers" />
<input type="submit" value="submit" id="submit1" />
</form>
</section>
<section id="pageForm">
<form action="#" name=inviteForm onsubmit="return getVolunteerInfoIntoArray()">
Number of Volunteers Entered: <strong><span id="numberOfVolunteers1"> </span></strong> <br/> <br/>
<label for="recipientName">Recipient name:
</label>
<input type="text" name="recipientName" id="recipientName" placeholder="Enter your Recipient Name" />
<label for="organizationName">Organization name:
</label>
<input type="text" name="organizationName" id="organizationName" placeholder="Enter your Organization Name" />
<input type="submit" value="submit" id="submit2" onclick="validateForm" />
</form>
</section>
<article id="placeholderContent">
Hello <span id="recipientName1"></span>!
<br/>
<br/> You have been invited to volunteer for an event held by <span id="organizationName1"></span>
</article>
<script>
var volunteerArray = [];
function getVolunteerInfoIntoArray() {
var volCount;
for (volCount = 5; volCount < getNumberOfVolunteers1.length; volCount++);
document.getElementById('recipientName');
document.getElementById('organizationName');
volunteerArray.push([recipientName.value, organizationName.value]);
}
</script>
</body>
</html>
I need to display the input form and the article multiple times. And store all the input in an array.
Is this what you're trying to do? Hope this helps even it's not exactly what you want hahahah
<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
.numberofvolunteers,
.all-volunteers{
padding:10px;
}
input,button{
margin:3px;
}
span{
font-size:12px;
padding:10px 10px;
}
</style>
</head>
<body>
<div class="numberofvolunteers">
<input type="number" id="volunteers" placeholder="Enter No. of volunteers"><button onclick="createVolunteerForm()">Submit</button>
</div>
<div id="all-volunteers">
</div>
<span id="array"></span>
<script>
var volunteerArray = [];
function createVolunteerForm(){
volunteerArray = [];
var numberofvolunteers = document.getElementById("volunteers").value;
var content = "";
if(parseInt(numberofvolunteers) < 5 || parseInt(numberofvolunteers) > 10){
alert("No. of volunteer should be 5 to 10");
}
else{
for(var i = 0; i < parseInt(numberofvolunteers); i++){
content += createForm(i);
}
}
document.getElementById("all-volunteers").innerHTML = content;
}
function createForm(index){
var content = ' <div id="volunteer-div-'+index+'">'+
'<div id="volunteer-form-'+index+'">'+
'<input type="text" id=recipient-'+index+' placeholder="Enter recipient name">'+
'<input type="text" id=organization-'+index+' placeholder="Enter organization name">'+
'<button id="submit-'+index+'" onclick="displayMessage('+index+');addToArray('+index+');">submit</button>'+
'</div>'+
'<span id="message-'+index+'"></span>'+
'</div>';
return content;
}
function displayMessage(index){
var message = "Hello " + document.getElementById("recipient-"+index).value + " your organization is " + document.getElementById("organization-"+index).value;
document.getElementById("message-" + index).innerHTML = message;
}
function addToArray(index){
volunteerArray.push({recipient : document.getElementById("recipient-"+index).value , organization : document.getElementById("organization-"+index).value});
document.getElementById("array").innerHTML = JSON.stringify(volunteerArray);
}
</script>
</body>
</html>
<script>
var monster = 40
var damage = Math.floor(Math.random()*10)
</script>
<p>Type 'Spark' or 'Fire' to Attack.</p>
<form action="javascript:alert( 'Enemy has' + (monster- damage) + 'Health!' );"
>
<div>
<input type="text">
<input type="submit">
</div>
</form>
<span></span>
</body>
So this is my code so far I type anything in it gives me a text box saying the Enemy has whatever health, I would like to have it where only if you type spark or fire into the input field you get that text box and if you type something random like skdfslkfha nothing happens (unlike now :/)
JS Fiddle
html
<form action="javascript:ale()">
<div>
<input type="text" id="find">
<input type="submit">
</div>
</form>
javascript
function ale() {
a = document.getElementById("find").value
if (a == 'Spark' || a == 'Fire') {
var monster = 40
var damage = Math.floor(Math.random() * 10)
alert('Enemy has ' + (monster - damage) + ' Health!');
}
else{
alert('worng keyword');
}
}
I am getting the headache of a lifetime. I'm not too great with Javascript so I have no idea what's going on. I'm supposed to be coding a text box that when a price is entered and submitted it will calculate the shipping and tell you the total. Everything is working except for the fact that the typed value isn't being set. So the price seems to be permanently set at NaN no matter what is inputted. What am I doing wrong? D:
<!DOCTYPE html>
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<form method="post" name="number" onsubmit='window.alert("Your total is $" + total + ".");'>
<input type="text" name="purchasePrice" placeholder="0.00" />
<input type="submit" value="submit" />
</form>
<script>
/* <![CDATA[ */
var price = parseFloat(document.getElementsByTagName("input")[0].value);
var shipping = parseFloat(calculateShipping(price));
var total = price + shipping;
function calculateShipping(price) {
if (price <= 25) {
return 1.5;
} else {
return price * 10 / 100
}
}
/* ]]> */
</script>
</body>
</html>
Here is a sample which may help you
<input id="amount" type="text" name="purchasePrice" placeholder="0.00" />
<input id="submit" type="submit" value="submit" />
var amount = document.getElementById("amount");
var submit = document.getElementById("submit");
function calculateShipping() {
var price = parseFloat(amount.value) || 0;
if (price <= 25) {
alert("Your total is $" + 1.5);
} else {
alert("Your total is $" + (price * 10 / 100));
}
}
submit.addEventListener("click", calculateShipping, false);
on jsfiddle
JavaScript code runs before it knows price... so anything *,+ NaN is... NaN.
You should call calculation of total while submit is clicked, f.ex. this way:
<!DOCTYPE html>
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<form method="post" name="number" onsubmit='calculateTotal()'>
<input type="text" name="purchasePrice" placeholder="0.00" />
<input type="submit" value="submit" />
</form>
<script>
/* <![CDATA[ */
function calculateTotal() {
var price = parseFloat(document.getElementsByTagName("input")[0].value);
var shipping = parseFloat(calculateShipping(price));
var total = price+shipping;
window.alert("Your total is $" + total + ".");
}
function calculateShipping(price) {
if (price <= 25) {
return 1.5; }
else {
return price * 10/100 }
}
/* ]]> */
</script>
</body>
</html>
You need to attach an event handler that fires when the user enters a value.
<form method="post" name="number" onsubmit='window.alert("Your total is $" + total + ".");'>
<label for="purchasePrice">Price:</label>
<input type="text" name="purchasePrice" id="purchasePrice" placeholder="0.00" />
<br>
<label for="shipping">Shipping:</label>
<input type="text" name="shipping" id="shipping" disabled>
<!-- <input type="submit" value="submit" /> -->
</form>
<script>
var price;
var shipping = parseFloat(calculateShipping(price));
var total = price+shipping;
function calculateShipping(price) {
if (price <= 25) {
return 1.5; }
else {
return price * 10/100;
}
}
var pp = document.getElementById("purchasePrice");
pp.onkeyup = function(e){
price = calculateShipping(this.value);
document.getElementById("shipping").value = price;
};
</script>
This kind of thing really is easier with a library like jQuery. It also handles the differences between browser implementations for attaching event handlers.