I cannot figure out why my to submit button takes me nowhere. I am very new to HTML and programming. Is anyone able to comb through and help me identify why this isn't submitting properly?
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Place an Order - Love that Ink Pen Company</title>
<script>
// values
var name = document.getElementById('cusName').value;
var deliverydate = document.getElementById('delDate').value;
var numItems = parseInt(document.getElementById('numItems').value);
// calculations
var price = numItems * 4.25;
var tax = price * 0.07;
var shipping = price * 0.02;
var totalCost = price + tax + shipping;
// Output text
var text = 'Thank you ' + name + 'for you order.<br/>';
text += 'You will receive ' + numItems + ' items delivered to you on ' + deliveryDate + '.<br/>';
text += 'You price of your items is $' + price.toFixed(2) + '.<br/>';
text += 'The tax charge is $' + tax.toFixed(2) + '.<br/>';
text += 'The shipping charge is $' + shipping.toFixed(2) + '.<br/>';
text += 'Your total is $' + totalCost.toFixed(2) + '.<br\>';;
// Results
document.write('<h2>' + text + '</h2>');;
}
</script>
</head>
<body>
<div style="text-align: left; background-color:Orange; color:Black; 16px;">
<h1>Place an Order</h1>
<form action="#">
<label>Customer Name:</label>
<input type="text" id="cusName"><br>
<label>Delivery Date:</label>
<input type="text" id="delDate"><br>
<label>Number Items:</label>
<input type="text" id="numItems"><br>
</div>
<div style="text-align: left; background-color:Green; color:Black; 16px;">
<input type="submit" id="btnSubmit" value="Submit" onclick="calculateTotal(); return false;" />
</div>
</form>
<div style="background-color:Orange; color:Black; 16px;">
<h2>
Visit our External Website
</h2>
<h2>
Link to our main page.
</h2>
</div>
</body>
</html>
I don't just want an answer, I am looking for what I am doing wrong. I want to learn and understand where I am not comprehending.
First of all you are taking the form to submit the data for your
application there will be no need to form you can do it without form
as well as with form.
second thing is you are calling calculateTotal() function and you
didn't made the function in script tag.
third thing is that deliverydate and deliveryDate are different
thing that you have to change.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Place an Order - Love that Ink Pen Company</title>
<script>
// values
function calculateTotal(){
var name = document.getElementById('cusName').value;
var deliverydate = document.getElementById('delDate').value;
var numItems = parseInt(document.getElementById('numItems').value);
// calculations
var price = numItems * 4.25;
var tax = price * 0.07;
var shipping = price * 0.02;
var totalCost = price + tax + shipping;
// Output text
var text = 'Thank you ' + name + 'for you order.<br/>';
text += 'You will receive ' + numItems + ' items delivered to you on ' + deliverydate + '.<br/>';
text += 'You price of your items is $' + price.toFixed(2) + '.<br/>';
text += 'The tax charge is $' + tax.toFixed(2) + '.<br/>';
text += 'The shipping charge is $' + shipping.toFixed(2) + '.<br/>';
text += 'Your total is $' + totalCost.toFixed(2) + '.<br\>';;
// Results
document.write('<h2>' + text + '</h2>');;
}
</script>
</head>
<body>
<div style="text-align: left; background-color:Orange; color:Black; 16px;">
<h1>Place an Order</h1>
<label>Customer Name:</label>
<input type="text" id="cusName"><br>
<label>Delivery Date:</label>
<input type="text" id="delDate"><br>
<label>Number Items:</label>
<input type="text" id="numItems"><br>
</div>
<div style="text-align: left; background-color:Green; color:Black; 16px;">
<input type="submit" id="btnSubmit" value="Submit" onclick="calculateTotal(); return false;" />
</div>
<div style="background-color:Orange; color:Black; 16px;">
<h2>
Visit our External Website
</h2>
<h2>
Link to our main page.
</h2>
</div>
</body>
</html>
I am looking for what I am doing wrong.
You have defined the script tag in header section ,DOM is not ready when document.getElementById will be executed.Remove them to closing end of body tag
<body>
<!--html-->
<script>
//js code
</script>
</body>
or use windows.load
2.There is no function defined calculateTotal
3.There is an extra colon (:) and } here
document.write('<h2>' + text + '</h2>');;}
4.Typo at deliverydate
Related
i am trying to build a solo project in javascript. I am having trouble to display a function when an number input is submitted.
this is my HTML code
<header>
<h1>Metric/Imperial unit conversion</h1>
<form>
<input type="number" name="input" id="input1">
<input type="submit" onclick="meterFeet()">
</form>
</header>
<main>
<h3>Length (Meter/Feet)</h3>
<p class="p-l" id="p-l1" "></p>
</main>
and this is my javascript code
let miucn = document.getElementById("input1");
function meterFeet() {
document.getElementById("p-l1").textContent =
miucn +
" meters = " +
(miucn * 3.281).toFixed(3) +
" feet | " +
miucn +
" feet =" +
(miucn / 3.281).toFixed(3) +
" meters";
}
I made some small fixes in your code.
change input type from submit to button
put (document.getElementById("input1").value) inside the function
parseInt() the input value
function meterFeet() {
let miucn = parseInt(document.getElementById("input1").value);
document.getElementById("p-l1").textContent =
miucn +
" meters = " +
(miucn * 3.281).toFixed(3) +
" feet | " +
miucn +
" feet =" +
(miucn / 3.281).toFixed(3) +
" meters";
return false;
}
<header>
<h1>Metric/Imperial unit conversion</h1>
<form>
<input type="number" name="input" id="input1">
<input type="button" onclick="meterFeet()" value="Submit">
</form>
</header>
<main>
<h3>Length (Meter/Feet)</h3>
<p class="p-l" id="p-l1" "></p>
</main>
I'm sure this is a simple fix but I don't see the problem. I was following a tutorial on making a JS Mad Lib and I wanted to experiment with the output. Adding more inputs. Well, when I put in all the inputs. It comes up blank. please keep in mind this is a project in progress and not the finished project. Any help is appreciated
const userprompts = document.querySelector("#prompts");
const story = document.querySelector("#story");
const error = document.querySelector("#error");
const submit = document.querySelector("#submit");
submit.addEventListener("click", completestory, false);
const reset= document.querySelector("#reset");
reset.addEventListener("click", resetPage, false);
document.querySelector('#name').focus();
const thename = document.querySelector("#name");
const firstverb = document.querySelector("#firstverb");
const firstnoun = document.querySelector("#firstnoun");
const adjective = document.querySelector("#adjective");
const secondnoun = document.querySelector("#secondnoun");
const adverb = document.querySelector("#adverb");
const storyOutput = document.querySelector("#storyOutput")
window.addEventListener("keydown", keydownHandler, false);
function keydownHandler(event) {
console.log("Enter key pressed");
}
function checkStory() {
}
function completestory() {
let finishedstory = "";
finishedstory += "There once was a person named " + thename.value + ". ";
finishedstory += "One day, " + thename.value + "was " + firstverb.value + "out in the "
+ firstnoun.value + ". ";
finishedstory += "All of a sudden, " + thename.value + "saw a " + adjective.value +
"dragon!" ;
finishedstory += thename.value + "thought for a second and did the only thing they could think of "
+ "They grabbed a " + secondnoun.value + ". " ;
finishedstory += "With the " + secondnoun.value + "in hand. " + thename.value + adverb.value + "attacked the dragon.";
finishedstory += "The dragon became very confused and left. The End";
storyOutput.innerHTML = finishedstory();
}
function resetPage() {
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" href="Mod3Layout.css">
<meta charset="utf-8">
<title>Sean's Mad Lib</title>
</head>
<body>
<h1> Sean's Wacky Mad Lib</h1><hr>
<div id="prompts">
<h3>Please enter your prompts here</h3>
<p>Enter a name here:
<input id="name" type="text" placeholder="name">
</p>
<p>Enter a verb here:
<input id="firstverb" type="text" placeholder="verb 1">
</p>
<p>Enter a noun here:
<input id="firstnoun" type="text" placeholder="noun 1">
</p>
<p>Enter an adjective here:
<input id="adjective" type="text" placeholder="adjective">
</p>
<p>Enter another noun here:
<input id="secondnoun" type="text" placeholder="noun 2">
</p>
<p>Finally, Enter an adverb here:
<input id="adverb" type="text" placeholder="adverb">
</p>
<button id="submit" type="button">Submit</button>
<p id="error">You did not answer all the questions. Please try
again</p>
</div>
<div id="story">
<p>Let's see what you wrote.</p>
<p id="storyOutput">Hello Dave</p>
<button id="reset" type="button" name="Reset">Reset</button>
</div>
You were receiving the error Uncaught TypeError: finishedstory is not a function because of this line in your completestory function:
storyOutput.innerHTML = finishedstory();
As you defined it, finishedstory is a String; just change that line to storyOutput.innerHTML = finishedstory; and the error no longer gets triggered.
const userprompts = document.querySelector("#prompts");
const story = document.querySelector("#story");
const error = document.querySelector("#error");
const submit = document.querySelector("#submit");
submit.addEventListener("click", completestory, false);
const reset= document.querySelector("#reset");
reset.addEventListener("click", resetPage, false);
document.querySelector('#name').focus();
const thename = document.querySelector("#name");
const firstverb = document.querySelector("#firstverb");
const firstnoun = document.querySelector("#firstnoun");
const adjective = document.querySelector("#adjective");
const secondnoun = document.querySelector("#secondnoun");
const adverb = document.querySelector("#adverb");
const storyOutput = document.querySelector("#storyOutput")
function checkStory() {
}
function completestory() {
let finishedstory = "";
finishedstory += "There once was a person named " + thename.value + ". ";
finishedstory += "One day, " + thename.value + "was " + firstverb.value + "out in the "
+ firstnoun.value + ". ";
finishedstory += "All of a sudden, " + thename.value + "saw a " + adjective.value +
"dragon!" ;
finishedstory += thename.value + "thought for a second and did the only thing they could think of "
+ "They grabbed a " + secondnoun.value + ". " ;
finishedstory += "With the " + secondnoun.value + "in hand. " + thename.value + adverb.value + "attacked the dragon.";
finishedstory += "The dragon became very confused and left. The End";
storyOutput.innerHTML = finishedstory;
}
function resetPage() {
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" href="Mod3Layout.css">
<meta charset="utf-8">
<title>Sean's Mad Lib</title>
</head>
<body>
<h1> Sean's Wacky Mad Lib</h1><hr>
<div id="prompts">
<h3>Please enter your prompts here</h3>
<p>Enter a name here:
<input id="name" type="text" placeholder="name">
</p>
<p>Enter a verb here:
<input id="firstverb" type="text" placeholder="verb 1">
</p>
<p>Enter a noun here:
<input id="firstnoun" type="text" placeholder="noun 1">
</p>
<p>Enter an adjective here:
<input id="adjective" type="text" placeholder="adjective">
</p>
<p>Enter another noun here:
<input id="secondnoun" type="text" placeholder="noun 2">
</p>
<p>Finally, Enter an adverb here:
<input id="adverb" type="text" placeholder="adverb">
</p>
<button id="submit" type="button">Submit</button>
<p id="error">You did not answer all the questions. Please try
again</p>
</div>
<div id="story">
<p>Let's see what you wrote.</p>
<p id="storyOutput">Hello Dave</p>
<button id="reset" type="button" name="Reset">Reset</button>
</div>
I'm creating an HTML page for a restaurant bill calculator but i'm having issues with the javascript/input/form and have been stuck for a while. I'm not sure why my function is not working when I submit. If anyone has any ideas where i'm going wrong, I would greatly appreciate any help!
Here is my current code (it has to be in one HTML document):
<body>
<h1>Restaurant Bill Calculator</h1>
<br>
<form name="billcalculator" method=post onsubmit="calculateBill()">
<div class="wrapper">
<label for="tax">Tax Percent:</label>
<input type="number" id="taxPercent" min="0" max="100" step=".01">%
<br>
<label for="price">Price from the menu:</label>
<input type="number" id="menuPrice" min="0" max="1000" step=".01">
<br>
<label for="tip">Tip Percent:</label>
<input type="number" id="tipPercent" min="0" max="200" step=".01">%
<br>
<input type="submit" onclick="calculateBill()" id="submit" value="Calculate Bill">
<br>
</div>
</form>
<p id="display">Please click Calculate Bill after completing form.</p>
<script>
function calculateBill() {
var tax = document.getElementById("taxPercent")
var price = document.getElementById("menuPrice")
var tip = document.getElementById("tipPercent")
var taxamount = price * tax;
var tipamount = price * tip;
var total = taxamount + tipamount + price;
if (!tax.checkValidity()) {
window.alert(tax.validatonMessage);
}
if (!price.checkValidity()). {
window.alert(price.validationMessage);
}
if (!tip.checkValidity()) {
window.alert(tip.validationMessage);
}
if (tax.checkValidity() && price.checkValidity() && tip.checkValidity()) {
document.getElementById("display").innerHTML = "Price: $" + price.toFixed(2) + "\n" + "Tax: $" + taxamount.toFixed(2) + "\n" + "Tip: $" + tip.toFixed(2) + "\n" + "Total: $" + total.toFixed(2);
}
return true;
}
</script>
You need to get and parse the values.
var tax = parseFloat(document.getElementById("taxPercent").value);
var price = parseFloat(document.getElementById("menuPrice").value);
var tip = parseFloat(document.getElementById("tipPercent").value);
Since you have no action in your form, and are not posting anywhere, you can just remove the post method from <form>.
You should also remove the onclick function from your input. There is no reason to have both an onclick and onsubmit handler pointing to the same function.
Then add this to your calculateBill function:
function calculateBill(e) {
e.preventDefault();
Finally, you should be getting the values out of the DOM elements like so:
var tax = document.getElementById("taxPercent").value;
These will be strings, so you will have to use parseInt.
Simple Madblib project. Or so I thought. This is probably an easy fix but I'd greatly appreciate any help, I can't seem to get it to work correctly.
The function isn't called when button is clicked. Any suggestions? I've tried changing location of function and form, as well as adjusting "" on the input string.
<!DOCTYPE html>
<html>
<script>
< head >
script language = "JavaScript" >
function Mission() {
var a1 = document.AgentID.elements[0].value;
var a2 = document.City.elements[0].value;
var a3 = document.Country.elements[0].value;
var a4 = document.Utensil.elements[0].value;
var a5 = document.Adj1.elements[0].value;
var a6 = document.Animal.elements[0].value;
var a7 = document.Transportation.elements[0].value;
document.write("<br>" + "<br>")
document.write("Congradulations on accepting your next assignment Agent " + a1 + "")
document.write("<br>" + "<br>")
document.write("Your flight leaves to " + a2 + " , " + a3 + " in the next eight hours. You have been granted your weapon of choice, the " + a5 + " " + a4 + ". Your assignment is to capture the " + a6 + " with minimal casualties. Your extraction via " + a7 + " will be waiting.")
document.write("<br>" + "<br>")
document.write("Best of Luck Agent " + a1 + "")
document.write("<br>")
document.write("Operations HQ")
}
</script>
</head>
<body>
<form id="AgentID" name="AgentID">
AgentID <input type="text">
</form>
<form id="City" name="City">
City <input type="text">
</form>
<form id="Country" name="Country">
Country <input type="text">
</form>
<form id="Utensil" name="Utensil">
Noun <input type="text">
</form>
<form id="Adj1" name="Adj1">
Adjective <input type="text">
</form>
<form id="Animal" name="Animal">
Animal <input type="text">
</form>
<form id="Transportaion" name="Transportaion">
Transportation <input type="text">
</form>
<form>
<input type="button" value="Accept" onClick="Mission()">
</form>
</body>
</html>
Lots of issues in your code.
HTML is not valid. The tags are not missing structure. Script needs to be either in head or body.
You are NOT using the same name for Transportation in the javascript as you do in the HTML.
Following should work.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function Mission() {
var a1 = document.AgentID.elements[0].value;
var a2 = document.City.elements[0].value;
var a3 = document.Country.elements[0].value;
var a4 = document.Utensil.elements[0].value;
var a5 = document.Adj1.elements[0].value;
var a6 = document.Animal.elements[0].value;
var a7 = document.Transportation.elements[0].value;
document.write("<br>" + "<br>")
document.write("Congradulations on accepting your next assignment Agent " + a1 + "")
document.write("<br>" + "<br>")
document.write("Your flight leaves to " + a2 + " , " + a3 + " in the next eight hours. You have been granted your weapon of choice, the " + a5 + " " + a4 + ". Your assignment is to capture the " + a6 + " with minimal casualties. Your extraction via " + a7 + " will be waiting.")
document.write("<br>" + "<br>")
document.write("Best of Luck Agent " + a1 + "")
document.write("<br>")
document.write("Operations HQ")
}
</script>
</head>
<body>
<form id="AgentID" name="AgentID">
AgentID <input type="text">
</form>
<form id="City" name="City">
City <input type="text">
</form>
<form id="Country" name="Country">
Country <input type="text">
</form>
<form id="Utensil" name="Utensil">
Noun <input type="text">
</form>
<form id="Adj1" name="Adj1">
Adjective <input type="text">
</form>
<form id="Animal" name="Animal">
Animal <input type="text">
</form>
<form id="Transportation" name="Transportation">
Transportation <input type="text">
</form>
<form>
<input type="button" value="Accept" onClick="Mission()">
</form>
</body>
</html>
I'm creating a budget app where the user can put in a product and a price. I want it to display the total cost by adding each input value (HTML5 type=number) to the next number that is put in with the next added line.
Snippet:
$(document).ready(function() {
$('.food').click(function() {
var $frm = $(this).parent();
var toAdd = $frm.children(".productInput").val();
var addPrice = $frm.children(".priceInput").val();
var addAmount = $frm.children(".amountInput").val();
var div = $("<div>");
div.append("<p>" + addAmount + "</p>", "<p id='product'> " + toAdd + " </p>", "<p>" + addPrice + "</p>");
$frm.parent().children(".messages").append(div);
$(".totalPrice").text("Total Price" + addAmount * addPrice);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="menu">
<h3>Shopping list</h3>
<div class="line">
<div>
<input class='amountInput' type='number' name='quantity' min='0' max='1000' step='1'>
<input class='productInput' type="text" name="message" value="">
<input class='priceInput' type='number' name='quantity' min='0' max='1000000' step='0.01'>
<button class="food">Add</button>
</div>
<div class="messages">
</div>
</div>
</div>
<div class="totalPrice">
How can I do this? :)
Thanks
Declare a global variable outside your function
$(document).ready(function() {
var totalPrice=0;
$('.food').click(function() {
..
do this while calculating total price
totalPrice = totalPrice + (addAmount * addPrice);
$(".totalPrice").text("Total Price" + totalPrice);
Create a totalPrice variable outside of your click function. Then add your addAmount * addPrice to the totalPrice every time you add a new item. Then display the totalPrice in your .totalPrice div instead of the addAmount * addPrice of the last added item.
You may also want to add a call to .toFixed() on your totalPrice when displaying it. Calling totalPrice.toFixed(2) will ensure that you display only two decimal places, so that it's a proper format for monetary values.
Working example:
$(document).ready(function() {
var totalPrice = 0;
$('.food').click(function() {
var $frm = $(this).parent();
var toAdd = $frm.children(".productInput").val();
var addPrice = $frm.children(".priceInput").val();
var addAmount = $frm.children(".amountInput").val();
var div = $("<div>");
div.append("<p>" + addAmount + "</p>", "<p id='product'> " + toAdd + " </p>", "<p>" + addPrice + "</p>");
$frm.parent().children(".messages").append(div);
totalPrice += addAmount * addPrice;
$(".totalPrice").text("Total Price: $" + totalPrice.toFixed(2));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu">
<h3>Shopping list</h3>
<div class="line">
<div>
<input class='amountInput' type='number' name='quantity' min='0' max='1000' step='1'>
<input class='productInput' type="text" name="message" value="">
<input class='priceInput' type='number' name='quantity' min='0' max='1000000' step='0.01'>
<button class="food">Add</button>
</div>
<div class="messages">
</div>
</div>
</div>
<div class="totalPrice"></div>