Javascript - how do i add cost? - javascript

How would i add a cost for the check boxes. When i add a onClick it said myFunction was not defined. I Don't know what i am doing. I was trying to make a check with the second function so if it was checked it would add the costs together and make a subtotal but i cant get it to work or find a way to get the costs to be a value in the check boxes
<html>
<body>
<p>A pizza is 13 dollars with no toppings.</p>
<form action="form_action.asp">
<input type="checkbox" name="pizza" value="Pepperoni" id="pep" > Pepperoni + 5$<br>
<input type="checkbox" name="pizza" value="Cheese" id="ch" >Cheese + 4$<br>
<br>
<input type="button" onClick="myFunction()" value="Send order"><br>
<input type="button" onClick="cost()" value="Get cost" > <br>
<input type="text" id="order" size="50">
</form>
<script type="text/javascript">
function myFunction() {
var pizza = document.forms[0];
var txt = "";
var i;
for (i = 0; i < pizza.length; i++) {
if (pizza[i].checked) { // this shows the you ordered the pizza with blank topping
txt = txt + pizza[i].value + " ";
}
}
document.getElementById("order").value = "You ordered a pizza with: " + txt;
}
function cost() {
var x = document.getElementById(pep).checked; // this is the failed check and i dont know how to fix it and get it to add a cost
document.getElementById("demo").innerhtml = x;
}
</script>
<p id="demo"></p>
</body>
</html>

answer that https://stackoverflow.com/users/7488236/manish-poduval got
<html>
<body>
<p>A pizza is 13 dollars with no toppings.</p>
<form action="form_action.asp">
<input type="checkbox" name="pizza" value="Pepperoni" id="pep">Pepperoni + 5$<br>
<input type="checkbox" name="pizza" value="Cheese" id="che">Cheese + 4$<br>
<br>
<input type="button" onclick="myFunction()" value="Send order">
<input type="button" onclick="cost()" value="Get cost">
<br><br>
<input type="text" id="order" size="50">
</form>
<script>
function myFunction() {
var pizza = document.forms[0];
var txt = "";
var i;
for (i = 0; i < pizza.length; i++) {
if (pizza[i].checked) {
txt = txt + pizza[i].value + " ";
}
}
document.getElementById("order").value = "You ordered a pizza with: " + txt;
}
function cost() {
var pep = 5;
var che = 4;
var pizza = 13;
var total = 0;
if (document.getElementById("pep").checked === true) {
total += pep;
}
if (document.getElementById("che").checked === true) {
total += che;
}
document.getElementById("order").value = "The cost is : " + total;
}
</script>
</body>
</html>

document.getElementById("pep").checked;
You have not written this line properly. after this check the value of x if it is true then add the value 5$ to 13$ and sum it up the cost and display it on a text field.
Let me know if it works or not.

Related

This calculator using form submission to satisfy variables isn't working

I am attempting to make a calculator in order to... well, calculate something. Anyway, I am trying to make 4 variables be set too 4 user inputs by using form submission. However, no matter what I do, I can't get the variables to get set. Help would be appreciated!
<!DOCTYPEhtml>
<html>
<head>
<title>NatHisCalc</title>
</head>
<body>
<h1><center><b><p>Test</p></b></center></h1>
<center><b><p id='output'>loading...</p></b></center>
<center><b><p id='output2'>loading...</p></b></center>
<center><b><p id='output3'>loading...</p></b></center>
<center><b><p id='output4'>loading...</p></b></center>
<form id="a" action="/action_page.php">
Input X <input type="number" name="x"><br><br>
<input type="button" onclick="calc()" value="Submit">
</form>
<form id="a" action="/action_page.php">
Input X <input type="number" name="y"><br><br>
<input type="button" onclick="calc()" value="Submit">
</form>
<form id="a" action="/action_page.php">
Input X <input type="number" name="a"><br><br>
<input type="button" onclick="calc()" value="Submit">
</form>
<form id="a" action="/action_page.php">
Input X <input type="number" name="b"><br><br>
<input type="button" onclick="calc()" value="Submit">
</form>
<script>
function calc() {
var x = document.getElementById("x").submit();
var y = document.getElementById("y").submit();
var a = document.getElementById("a").submit();
var b = document.getElementById("b").submit();
var u = (0.101*(y/100))*(480000*(a/100))
var j = (0.581*(x/100))*(120000*(b/100))
if (x > 150 || x < 50) {
window.alert('Hold on... Those inputs will result in an unreasonable output. You can click ');
}
var preresult = j + u;
if (preresult < 177000) {
document.getElementById('output').innerHTML = 'Test';
} else {
document.getElementById('output').innerHTML = 'Test1';
}
if (u > 179999) {
document.getElementById('output').innerHTML = 'Test2';
}
document.getElementById('output2').innerHTML = 'Test3' + j;
document.getElementById('output3').innerHTML = 'Test4 ' + u;
document.getElementById('output4').innerHTML = 'Test5 ' + preresult;
}
</script>
</body>
</html>
Looked into your code, it seems that you have made things way too much complicated that it should be. First of all, you don't call submit function on the input to get the value of it. If you want to get the value of x then you just access the value property like this document.getElementById("x").value. Secondly, you really don't need four buttons, all you need to do is ONE button that submits the form and adding required on input fields makes the browser not submit the form until all forms are filled. Last of all, id attribute needs to be unique across your page. You have both form and input field as id a which is unacceptable. It will show no error but get you in sorts of trouble. You can see what I did here, where I prevented the form from being submitted upon the button click and simply called the calc function to perform the calculation.
<!DOCTYPEhtml>
<html>
<head>
<title>NatHisCalc</title>
</head>
<body>
<h1><center><b><p>Test</p></b></center></h1>
<center><b><p id='output'>loading...</p></b></center>
<center><b><p id='output2'>loading...</p></b></center>
<center><b><p id='output3'>loading...</p></b></center>
<center><b><p id='output4'>loading...</p></b></center>
<form onsubmit="event.preventDefault(); calc();" action="/action_page.php">
Input X <input type="number" id="x" required><br><br>
Input Y <input type="number" id="y" required><br><br>
Input A <input type="number" id="a" required><br><br>
Input B <input type="number" id="b" required><br><br>
<input type="submit" value="Submit">
</form>
<script>
function calc() {
var x = document.getElementById("x").value;
var y = document.getElementById("y").value;
var a = document.getElementById("a").value;
var b = document.getElementById("b").value;
var u = (0.101*(y/100))*(480000*(a/100))
var j = (0.581*(x/100))*(120000*(b/100))
if (x > 150 || x < 50) {
window.alert('Hold on... Those inputs will result in an unreasonable output. You can click ');
}
var preresult = j + u;
if (preresult < 177000) {
document.getElementById('output').innerHTML = 'Test';
} else {
document.getElementById('output').innerHTML = 'Test1';
}
if (u > 179999) {
document.getElementById('output').innerHTML = 'Test2';
}
document.getElementById('output2').innerHTML = 'Test3' + j;
document.getElementById('output3').innerHTML = 'Test4 ' + u;
document.getElementById('output4').innerHTML = 'Test5 ' + preresult;
}
</script>
</body>
</html>

JavaScript Error Finding the error on why my qty of items *cost of items won't give me a final answer

Can Someone help me? so my code allows me to send out an alert box when I run my system; first name, last name, street address, city, state, zip, something you want to buy and some type of amount. It runs but then it doesn't display the final amount of the (qty* cost of the item) at the end.
Am I missing something? how can I get it working?
Once I have the website I have no error, when I run it and it reaches the end I receive an error (Uncaught TypeError: Cannot set property 'value' of null) this line
if (document.getElementById("txtPurchase").value= "Gameboy"){
and <p><input type="button" value="Go!" name="btnSubmit" onclick="ordering()" ></p>
(Uncaught TypeError: Cannot set property 'value' of null
at ordering (line:35)
at HTMLInputElement.onclick (line:85)
ordering (line:35)
onclick (line:85)
<!DOCTYPE>
<html lang="en">
<head>
<meta charset="utf-8" />
<title> Confirmations on orders</title>
</head>
<body>
<script type="text/javascript">
function ordering() {
var firstName;
firstName = document.practiceForm.txtFirstName.value;
alert(firstName);
var lastName;
lastName = document.practiceForm.txtLastName.value;
alert(lastName);
var streetAddress;
streetAddress = document.practiceForm.txtStreetAddress.value;
alert(streetAddress);
var city;
city = document.practiceForm.txtCity.value;
alert(city);
var state;
state = document.practiceForm.txtState.value;
alert(state);
var zip;
zip = document.practiceForm.txtZip.value;
alert(zip);
if (document.getElementById("txtPurchase").value = "Gameboy") {
var gameboyPrice = 25;
var gameboyQuantity = document.getElementsById("quantity").value;
var gameboyTotal = gameboyPrice * gameboyQuantity;
alert("total: $" + gameboyTotal);
} else if (document.getElementById("txtPurchase").value = "DSI") {
var dsiPrice = 50;
var dsiQuantity = document.getElementsById("quantity").value;
var dsiTotal = dsiPrice * dsiQuantity;
alert("total: $" + dsiTotal);
} else if (document.getElementById("txtPurchase").value = "WII") {
var wiiPrice = 75;
var wiiQuantity = document.getElementsById("quantity").value;
var wiiTotal = wiiPrice * wiiQuantity;
alert("total: $" + wiiTotal);
}
}
</script>
<form name="practiceForm">
<p>First Name: <input type="text" name="txtFirstName"></p>
<p>Last Name: <input type="text" name="txtLastName"></p>
<p>Street Address: <input type="text" name="txtStreetAddress"></p>
<p>City: <input type="text" name="txtCity"></p>
<p>State: <input type="text" name="txtState"></p>
<p>Zip: <input type="text" name="txtZip"></p>
<p>What do you want to purchase today?:
<select id="txtPurchase">
<option value="Gameboy">Gameboy $25 each</option>
<option value="DSI">DSI $50 each</option>
<option value="WII">Wii $75 each</option>
</select>
</p>
<p>How much would you like to buy?: <input type="number" id="quantity"></p>
<p><input type="button" value="Go!" name="btnSubmit" onclick="ordering()"></p>
</form>
</body>
</html>
Use == instead of = in if conditions
And
In one place you use getElementsById("quantity")
Instead use getElementById("quantity") //No 's'
So your script tag should look like
<!DOCTYPE>
<html lang="en">
<head>
<meta charset="utf-8" />
<title> Confirmations on orders</title>
</head>
<body>
<script type="text/javascript">
function ordering() {
var firstName;
firstName = document.practiceForm.txtFirstName.value;
alert(firstName);
var lastName;
lastName = document.practiceForm.txtLastName.value;
alert(lastName);
var streetAddress;
streetAddress = document.practiceForm.txtStreetAddress.value;
alert(streetAddress);
var city;
city = document.practiceForm.txtCity.value;
alert(city);
var state;
state = document.practiceForm.txtState.value;
alert(state);
var zip;
zip = document.practiceForm.txtZip.value;
alert(zip);
if (document.getElementById("txtPurchase").value == "Gameboy") {
var gameboyPrice = 25;
var gameboyQuantity = document.getElementById("quantity").value;
var gameboyTotal = gameboyPrice * gameboyQuantity;
alert("total: $" + gameboyTotal);
} else if (document.getElementById("txtPurchase").value == "DSI") {
var dsiPrice = 50;
var dsiQuantity = document.getElementsById("quantity").value;
var dsiTotal = dsiPrice * dsiQuantity;
alert("total: $" + dsiTotal);
} else if (document.getElementById("txtPurchase").value == "WII") {
var wiiPrice = 75;
var wiiQuantity = document.getElementsById("quantity").value;
var wiiTotal = wiiPrice * wiiQuantity;
alert("total: $" + wiiTotal);
}
}
</script>
<form name="practiceForm">
<p>First Name: <input type="text" name="txtFirstName"></p>
<p>Last Name: <input type="text" name="txtLastName"></p>
<p>Street Address: <input type="text" name="txtStreetAddress"></p>
<p>City: <input type="text" name="txtCity"></p>
<p>State: <input type="text" name="txtState"></p>
<p>Zip: <input type="text" name="txtZip"></p>
<p>What do you want to purchase today?:
<select id="txtPurchase">
<option value="Gameboy">Gameboy $25 each</option>
<option value="DSI">DSI $50 each</option>
<option value="WII">Wii $75 each</option>
</select>
</p>
<p>How much would you like to buy?: <input type="number" id="quantity"></p>
<p><input type="button" value="Go!" name="btnSubmit" onclick="ordering()"></p>
</form>
</body>
</html>
var dsiQuantity=document.getElementsById("quantity").value;
you have a typo mistake here. Change it to
var dsiQuantity=document.getElementById("quantity").value;
Two things you need to change
1. in if condition - put == in place of =
2. for numeric value you need to parse them into proper number (i.e. int or float)
<!DOCTYPE>
<html lang="en">
<head>
<meta charset="utf-8" />
<title> Confirmations on orders</title>
</head>
<body>
<script type="text/javascript">
function ordering() {
var firstName;
firstName = document.practiceForm.txtFirstName.value;
console.log(firstName);
var lastName;
lastName = document.practiceForm.txtLastName.value;
console.log(lastName);
var streetAddress;
streetAddress = document.practiceForm.txtStreetAddress.value;
console.log(streetAddress);
var city;
city = document.practiceForm.txtCity.value;
console.log(city);
var state;
state = document.practiceForm.txtState.value;
console.log(state);
var zip;
zip = document.practiceForm.txtZip.value;
console.log(zip);
var purchase = document.getElementById("txtPurchase").value;
// parse value in Float type data.
var qty = parseFloat(document.getElementById("quantity").value);
// USE == for comparison
if (purchase == "Gameboy") {
var gameboyPrice = 25;
var gameboyTotal = gameboyPrice * qty;
alert("total: $" + gameboyTotal);
} else if (purchase == "DSI") {
var dsiPrice = 50;
var dsiTotal = dsiPrice * qty;
alert("total: $" + dsiTotal);
} else if (purchase == "WII") {
var wiiPrice = 75;
var wiiTotal = wiiPrice * qty;
alert("total: $" + wiiTotal);
}
}
</script>
<form name="practiceForm">
<p>First Name: <input type="text" name="txtFirstName"></p>
<p>Last Name: <input type="text" name="txtLastName"></p>
<p>Street Address: <input type="text" name="txtStreetAddress"></p>
<p>City: <input type="text" name="txtCity"></p>
<p>State: <input type="text" name="txtState"></p>
<p>Zip: <input type="text" name="txtZip"></p>
<p>What do you want to purchase today?:
<select id="txtPurchase">
<option value="Gameboy">Gameboy $25 each</option>
<option value="DSI">DSI $50 each</option>
<option value="WII">Wii $75 each</option>
</select>
</p>
<p>How much would you like to buy?: <input type="number" id="quantity"></p>
<p><input type="button" value="Go!" name="btnSubmit" onclick="ordering()">
</p>
</form>
</body>
</html>

How to set paragraph to textbox text

Let us say I have an HTML form, with two textboxes, I want to add the two numbers in the two textboxes and display the result in a paragraph. How can I do that?
Change paragraph according to textbox is what I can't find!
Very simple:
document.getElementById('sum').onsubmit = add;
function add(e) {
e.preventDefault();
var num1 = document.getElementById('num1').value;
var num2 = document.getElementById('num2').value;
var result = 'Result: ' + String(parseInt(num1) + parseInt(num2));
var p = document.getElementById('result');
p.innerHTML = result;
}
<form id="sum">
<label for="num1">First number:</label>
<br />
<input type="text" id="num1" />
<br />
<label for="num1">Second number:</label>
<br />
<input type="text" id="num2" />
<br />
<input type="submit" value="Add" />
</form>
<p id="result">Result:</p>
In the html we have a form with 3 inputs, 2 are type text and one is type submit. and also a paragraph.
In the javascript we assign to the form's onsumbit event the function add(), in the function we prevent the default so the form wont refresh the page, then we get the 2 values that were inputed, create a string that would contain the sum of those values and set the paragraph's innerHTML to it.
Create a calculator function and then you can fire it on keyup or you can assign it to a button if you'd like.
function calcTotal(){
var inputs = document.getElementsByTagName('input'),
result = 0;
for(var i=0;i<inputs.length;i++){
if(parseInt(inputs[i].value))
result += parseInt(inputs[i].value);
}
document.getElementById('total').innerHTML = 'Total: ' + result;
}
<form>
<input onkeyup="calcTotal()" type="text" />
<input onkeyup="calcTotal()" type="text" />
</form>
<p id="total"></p>
follow bellow JS code:
<html>
<head>
<title>Sum Two Number</title>
<script language="javascript">
function addNumbers()
{
var val1 = parseInt(document.getElementById("value1").value);
var val2 = parseInt(document.getElementById("value2").value);
if(val1 !== "" && val2 !== "") {
var result = val1 + val2;
document.getElementById('result').innerHTML = result;
}
}
</script>
</head>
<body>
value1 = <input type="text" id="value1" name="value1" value="0" onkeyup="javascript:addNumbers()"/>
value2 = <input type="text" id="value2" name="value2" value="0" onkeyup="javascript:addNumbers()"/>
<p>Answer = <span id="result"></span></p>
</body>
</html>
In this example, you have a form with 2 input. When you press on a button, the value of those 2 input is added inside a paragraph.
Hope this help.
function addInputContentToParagraph() {
var txtValue1 = document.getElementById('textbox1').value;
var txtValue2 = document.getElementById('textbox2').value;
document.getElementById('para').innerHTML = txtValue1 + ' ' + txtValue2;
}
a {
cursor:pointer;
border:1px solid #333;
padding:4px;
margin:10px;
display:inline-block;
}
<form id="myForm" name="myForm">
<input type="text" name="textbox1" id="textbox1" value="1">
<input type="text" name="textbox2" id="textbox2" value="2">
</form>
<a onclick="addInputContentToParagraph();">Add Input Values to Paragraph</a>
<p id="para"></p>

HTML function not working with button

I have this small bit of HTML and JS and I cannot for the life of me get the function to work with the button. I have tried many things and changed different styles of creating buttons and text boxes but I cannot figure out how to fix it.
Here is the Code:
<div id="orderForm">
<form name="orderingForm" action="form_action.asp">
<p>Complete this form to order Bags
<br>
<br> How many of each bag do you want (3p/ea)</p>
<p>Number of Blue bags:
<input type="text" name="blueBags" value=0>
</p>
<p>Number of Red bags:
<input type="text" name="redBags" value=0>
</p>
<p>Number of Yellow bags:
<input type="text" name="yellowBags" value=0>
</p>
<p>Number of Green bags:
<input type="text" name="greenBags" value=0>
</p>
<p>Enter Desired Text:
<input type="text" name="textBags" value="Enter Your text here">
<p>Minimum order 100 bags</p>
<input type="button" value="Click to Order" onClick="Order()">
</form>
</div>
<!--Script for the ordering system-->
<script>
<!-- extra functions to check if input is an integer -->
function isInt(n) {
return n % 1 === 0;
}
function Order() {
var amountB = document.orderingForm.blueBags.value;
var amountR = document.orderingForm.redBags.value;
var amountY = document.orderingForm.yellowBags.value;
var amountG = document.orderingForm.greenBags.value;
var text = document.orderingForm.textBags.value;
var total = amountB + amountR + amountY + amountG;
if (isInt(form1.blueBags.value) == true && isInt(form1.redBags.value) == true && isInt(form1.yellowBags.value) == true && isInt(form1.greenBags.value) == true) {
if (total > 100) {
var cost = (total * 0.03);
//if (confirm("CONFIRM ORDER: /n blue bags: " + form1.blueBags.value + "/n red bags: " + form1.redBags.value + "/n yellow bags: " + form1.yellowBags.value + "/n green bags: " + form1.greenBags.value + "/n Desired Text: " + text)) {
alert("Order Confirmed");
} else {
alert("Order Cancelled");
}
} else {
alert("Minimum order is 100 bags.");
}
} else {
alert("One or more of the forms doesn't contain a quantity for order.");
}
}
</script>
Here you miss handled with '{}' and your form name is "orderingForm" not "form1"
try this:
<html>
<body>
<div id="orderForm">
<form name="orderingForm" action="form_action.asp">
<p>Complete this form to order Bags
<br>
<br> How many of each bag do you want (3p/ea)</p>
<p>Number of Blue bags:
<input type="text" name="blueBags" value=0>
</p>
<p>Number of Red bags:
<input type="text" name="redBags" value=0>
</p>
<p>Number of Yellow bags:
<input type="text" name="yellowBags" value=0>
</p>
<p>Number of Green bags:
<input type="text" name="greenBags" value=0>
</p>
<p>Enter Desired Text:
<input type="text" name="textBags" value="Enter Your text here">
<p>Minimum order 100 bags</p>
<input type="button" value="Click to Order" onClick="Order()">
</form>
</div>
</body>
<!--Script for the ordering system-->
<script>
<!-- extra functions to check if input is an integer -->
function isInt(n) {
return n % 1 === 0;
}
function Order() {
console.log("hai")
var amountB = document.orderingForm.blueBags.value;
var amountR = document.orderingForm.redBags.value;
var amountY = document.orderingForm.yellowBags.value;
var amountG = document.orderingForm.greenBags.value;
var text = document.orderingForm.textBags.value;
var total = amountB + amountR + amountY + amountG;
if (isInt(orderingForm.blueBags.value) == true && isInt(orderingForm.redBags.value) == true && isInt(orderingForm.yellowBags.value) == true && isInt(orderingForm.greenBags.value) == true) {
if (total > 100) {
var cost = (total * 0.03);
alert("Order Confirmed");
} else {
alert("Minimum order is 100 bags.");
}
} else {
alert("One or more of the forms doesn't contain a quantity for order.");
}
}
</script>
</html>
hope it will help for you.
You used .. and missed }. Try this
<div id="orderForm">
<form name="orderingForm" action="form_action.asp">
<p>Complete this form to order Bags
<br>
<br> How many of each bag do you want (3p/ea)</p>
<p>Number of Blue bags:
<input type="text" name="blueBags" value=0>
</p>
<p>Number of Red bags:
<input type="text" name="redBags" value=0>
</p>
<p>Number of Yellow bags:
<input type="text" name="yellowBags" value=0>
</p>
<p>Number of Green bags:
<input type="text" name="greenBags" value=0>
</p>
<p>Enter Desired Text:
<input type="text" name="textBags" value="Enter Your text here">
<p>Minimum order 100 bags</p>
<input type="button" value="Click to Order" onClick="Order()">
</form>
</div>
<!--Script for the ordering system-->
<script>
<!-- extra functions to check if input is an integer -->
function isInt(n) {
return n % 1 === 0;
}
function Order() {
var amountB = document.orderingForm.blueBags.value;
var amountR = document.orderingForm.redBags.value;
var amountY = document.orderingForm.yellowBags.value;
var amountG = document.orderingForm.greenBags.value;
var text = document.orderingForm.textBags.value;
var total = amountB + amountR + amountY + amountG;
//if (isInt(form1.blueBags.value) == true && isInt(form1.redBags.value) == true && isInt(form1.yellowBags.value) == true && isInt(form1.greenBags.value) == true) {
if (total > 100) {
// var cost = (total * 0.03);
//if (confirm("CONFIRM ORDER: /n blue bags: " + form1.blueBags.value + "/n red bags: " + form1.redBags.value + "/n yellow bags: " + form1.yellowBags.value + "/n green bags: " + form1.greenBags.value + "/n Desired Text: " + text)) {
alert("Order Confirmed");
// } else {
// alert("Order Cancelled");
// }
} else {
alert("Minimum order is 100 bags.");
}
//}else {
// alert("One or more of the forms doesn't contain a quantity for order.");
// }
}
</script>
First-off, don't use HTML Comments between your <script> tags, as you have:
<!-- extra functions to check if input is an integer -->
And you have a syntax error at .. should be . "single dot", as you have:
var text = document.orderingForm..textBags.value;
This should be something like this:
var text = document.orderingForm.textBags.value;
And finally, you didn't close your Order() function ending bracket.
Checkout this fiddle: http://jsfiddle.net/c5496q92/
Updated for Understanding Comments in HTML and JavaScript:
When you wants to add some Comments in HTML, you can use:
<!-- Your Comments -->
And if you are working in .js file or between <script></script> tags you should use:
/* For multi-line comments */
// For singular line comment
You can read about this more at:
http://www.inmotionhosting.com/support/edu/website-design/website-design-basics/comment-php-javascript-html-css-code
Replace the line as follows:
var text = document.orderingForm.textBags.value;
and to add two values use parseInt(value) or parseFloat(value) as:
var r = parseInt(amountB) + parseInt(amountR);
Remove . from this line
var text = document.orderingForm..textBags.value;
write
var text = document.orderingForm.textBags.value;
and close the } end of your code

Putting all the output in a specific textbox in a while loop in JavaScript

So all I want here to happen is that how can I put all the given output in the answer textbox.
UPDATE
<html>
<body>
<script type="text/javascript">
function myFunction() {
var x = parseInt(document.f1.n1.value);
var y = parseInt(document.f1.n2.value);
if(x>=y) {
document.write("Invalid");
}
while (x<y)
{
document.write(x)
x=x+1;
}
}
</script>
<form name=f1 onsubmit="return false">
First no. <input type="text" name="n1">
Second no. <input type="text" name="n2">
Answer: <input type="text" name="ans" disabled>
<input type="submit" onClick="myFunction()">
</form>
</body>
</html>
Thank you in advance
You can do something like this:
Give answer input an id:
<input id="answerTextBox" type="text" name="ans" disabled>
After while loop populate answer textbox:
while (x>y)
{
document.getElementById("answerTextBox").value += ("" + x);
x=x+1;
}
This will put x and y in your answer textbox.
UPDATE******
<html>
<body>
<script type="text/javascript">
function myFunction() {
document.getElementById("answerTextBox").value = "";
var x = parseInt(document.getElementById("n1").value);
var y = parseInt(document.getElementById("n2").value);
if(x >= y)
{
document.getElementById("answerTextBox").value = "Invalid Input";
}
while (x < y)
{
document.getElementById("answerTextBox").value += ("" + x);
x=x+1;
}
}
</script>
First no. <input type="text" name="n1" id="n1">
Second no. <input type="text" name="n2" id="n2">
Answer: <input id="answerTextBox" type="text" name="ans" readonly>
<input type="button" onClick="myFunction()">
</form>
</body>
</html>
UPDATE for exponential************************
<html>
<body>
<script type="text/javascript">
function myFunction() {
document.getElementById("answerTextBox").value = "";
var x = parseInt(document.getElementById("n1").value);
var y = x;
var answer = 1;
for(var i = 0; i < y; i++)
{
answer = answer * x;
}
document.getElementById("answerTextBox").value = answer;
}
</script>
Enter Number: <input type="text" name="n1" id="n1">
Answer: <input id="answerTextBox" type="text" name="ans" readonly>
<input type="button" value="Submit" onClick="myFunction()">
</form>
</body>
</html>
UPDATE Add Exponents*****************
<html>
<body>
<script type="text/javascript">
function myFunction() {
document.getElementById("answerTextBox").value = "";
var x = parseInt(document.getElementById("n1").value);
var y = parseInt(document.getElementById("n2").value);
var answer = 0;
for(var i = 0; i <= y; i++)
{
answer = answer + Math.pow(x, i);
}
document.getElementById("answerTextBox").value = answer;
}
</script>
Enter Base Number: <input type="text" name="n1" id="n1">
Enter Highest Exponent: <input type="text" name="n2" id="n2">
Answer: <input id="answerTextBox" type="text" name="ans" readonly>
<input type="button" value="Submit" onClick="myFunction()">
</form>
</body>
</html>
<html>
<body>
The number inserted in the textbox is the number of exponent it will generate. The sample is 3. 3X3X3 is 27. <br>
<script type="text/javascript">
function myFunction() {
var x = document.f1.n1.value;
while(x<27)
{
x=x*3;
}
document.write(x)
}
</script>
<form name="f1" onsubmit="return false">
First no. <input type="text"name="n1" value=3 disabled>
<input type="submit" onClick="myFunction()">
</form>
</body>
</html>
Update: The Exponent in any number.

Categories