Taking html input and generating output - javascript
Can someone help me get closer to doing what I am trying to do here? I'm very new at html/javascript (obviously) and really don't know how to ask what I want.
I'm just trying make a template maker for craigslist. Make an easy to use html page to send to people and have them fill in the input fields and have it spit out the html to post into the body of the CL posting block.
Any direction/guidance would be appreciated. I've already spent about 3 hours on this and now don't know what to do.
Thanks!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br>
<html xmlns="http://www.w3.org/1999/xhtml"><br>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Craigslist Ad Builder</title>
<style type="text/css">
body {margin: 30px;}
</style>
<body style="margin: 10; padding: 10;"><br>
<!--
<script type="text/javascript">
function multiplyBy()
{
var numOne = document.getElementById("length").value;
var numTwo = document.getElementById("width").value;
var numOne = varLength.value;
var numTwo = varWidth.value;
}
function multiplyFunction ()
{
var sqftResult = numOne.value * numTwo.value;
console.log(sqftResult);
document.getElementById("result").innerHTML = sqftResult;
}
</script>
-->
<script>
function scrHTML(){
var title = document.getElementById("title").value;
var name = document.getElementById("name").value;
var phone = document.getElementById("phone").value;
var price = document.getElementById("price").value;
var bed = document.getElementById("bedrooms").value;
var bath = document.getElementById("bathrooms").value;
var model = document.getElementById("model").value;
var length = document.getElementById("length").value;
var width = document.getElementById("width").value;
var sqft = document.getElementById("sqft").value;
var sections = document.getElementById("sections").value;
var newused = document.getElementById("new-used").value;
var feature1 = document.getElementById("featureOne").value;
var feature2 = document.getElementById("featureTwo").value;
var feature3 = document.getElementById("featureThree").value;
var feature4 = document.getElementById("featureFour").value;
var feature5 = document.getElementById("featureFive").value;
var link = document.getElementById("link").value;
var htmlOutput = document.getElementById("htmlOutput");
// htmlOutput.value = "<p> <b><u><h1>Contact info:</u></b> <br> <b>"+ name +" | "+ phone +" </h1></b></p><hr><h1>"+title+"</h1><h2>31905 IH 10 West Boerne TX 78006</h2><h2> Sale By: Agent/Broker</h2><h2>$"+price+"</h2><p><b><big><u>KEY FEATURES</u></big></b><br><b>Sq Footage: </b> " + SQFT + " sqft <br><b>Bedrooms: </b>"+beds+" Bed(s)<br><b>Bathrooms: </b>"+baths+" Bath(s)<br><b>Property Categoty: </b>"+newused+"<br><b>Manufacturer: </b>Oak Creek Homes<br><b>Width: </b>"+width+"<br><b>Length: </b>"+length+"<br><br><b><u>OTHER DETAILS AVAILABLE</u></b><hr><h2><b>"+newused+" 2017 Mobile Home from Oak Creek Homes<br>"+model+"</b><b><h3>Special Online Pricing - contact "+ name +" at "+phone+" for pricing sheet and more info!</b></h3><hr><u><b>Features that come STANDARD:</u></b><ul><li>"+feature1+"</li><li>"+feature2+"</li><li>"+feature3+"</li><li>"+feature4+"</li><li>"+feature5+"</li></ul><hr><b><h2>All this for only $"+price+" - call "+name+" at "+phone+" for more info or to come see the house!</b></h2><hr><ul><li>**Price does not include delivery, setup, or A/C</li></ul><hr>Additional Links: "+ link +"<hr><br><br>mobile home, manufactured home, modular home, tiny home, tiny house, cheap house, cheap home, palm harbor, clayton homes, palm harbor homes, titan direct mobile home, oak creek home, oak creek homes, mobile homes texas, mobile home san antonio, manufactured home san antonio, modular home texas, repo home, repossesssed home, foreclosure, foreclosed, cheap home, cheap house, used home, used house, single wide, double wide, triple wide, titan factory direct";
htmlOutput.value = link
}
</head>
</script>
<form>
Posting Title<br>
<input type="text" name="title" id="title" /><br>
<br>
Name:
<input type="text" name="name" id="name" /><br>
Phone:
<input type="text" name="phone" id="phone" /><br>
Price:
<input type="text" name="price" id="price" /><br>
Bedrooms:
<input type="text" name="bedrooms" id="bedrooms" /><br>
Bathrooms:
<input type="text" name="bathrooms" id="bathrooms" /><br>
Model:
<input type="text" name="model" id="model" /><br>
Length:
<input type="text" name="length" id="length" /><br>
Width:
<input type="text" name="width" id="width" /><br>
Square Feet:
<input type="text" name="sqft" id="sqft" /><br>
Single or Double:
<input type="text" name="sections" id="sections" /><br>
New or Used:
<input type="text" name="new-used" id="new-used" /><br>
Feature 1:
<input type="text" name="featureOne" id="featureOne" /><br>
Feature 2:
<input type="text" name="featureTwo" id="featureTwo" /><br>
Feature 3:
<input type="text" name="featureThree" id="featureThree" /><br>
Feature 4:
<input type="text" name="featureFour" id="featureFour" /><br>
Feature 5:
<input type="text" name="featureFive" id="featureFive" /><br>
Link:
<input type="text" name="link" id="link" /><br>
<input type="button" value="Generate HTML" onclick= "scrHTML()" id="txtOutput" />
<input type="text" id="htmlOutput" />
</form>
</body>
</html>
Maybe this is what you are looking for. I've added a hidden div which will serve as the result container. When the user clicks the button the form will hide and the container with the output will be shown.
I've also cleaned up your code a bit.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Craigslist Ad Builder</title>
<script>
function scrHTML(){
var resultDiv = document.getElementById("result");
var formDiv = document.getElementsByTagName("form")[0];
// the input values
var name = document.getElementById("name").value;
var phone = document.getElementById("phone").value;
// etc..
// here you can put your result html
resultDiv.innerHTML = "<p>" + name + "<br/>" + phone + "</p>";
// hide the form and display the result div
formDiv.style.display = "none";
resultDiv.style.display = "block";
}
</script>
</head>
<body>
<form>
Name:
<input type="text" name="name" id="name" /><br>
Phone:
<input type="text" name="phone" id="phone" /><br>
<input type="button" value="Generate HTML" onclick="scrHTML()" id="txtOutput" />
</form>
<div id="result" style="display: none"> </div>
</body>
</html>
As you can see, the basic HTML structure should be like this:
<html>
<head>
<script></script>
</head>
<body>
<!-- content here -->
</body>
</html>
Thank you for the answers - below is what I've decided to use as the best answer.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br>
<html xmlns="http://www.w3.org/1999/xhtml"><br>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Craigslist Ad Builder</title>
<style type="text/css">
body {margin: 30px;}
</style>
<script type="text/javascript">
<!--
function multiplyBy() {
var numOne = document.getElementById("length").value;
var numTwo = document.getElementById("width").value;
var numOne = varLength.value;
var numTwo = varWidth.value;
}
function multiplyFunction() {
var sqftResult = numOne.value * numTwo.value;
console.log(sqftResult);
document.getElementById("result").innerHTML = sqftResult;
}
function scrHTML() {
var title = document.getElementById("title").value;
var name = document.getElementById("name").value;
var phone = document.getElementById("phone").value;
var price = document.getElementById("price").value;
var beds = document.getElementById("bedrooms").value;
var baths = document.getElementById("bathrooms").value;
var model = document.getElementById("model").value;
var length = document.getElementById("length").value;
var width = document.getElementById("width").value;
var sqft = document.getElementById("sqft").value;
var sections = document.getElementById("sections").value;
var newused = document.getElementById("new-used").value;
var feature1 = document.getElementById("featureOne").value;
var feature2 = document.getElementById("featureTwo").value;
var feature3 = document.getElementById("featureThree").value;
var feature4 = document.getElementById("featureFour").value;
var feature5 = document.getElementById("featureFive").value;
var link = document.getElementById("link").value;
var htmlOutput = document.getElementById("htmlOutput");
htmlOutput.value = "<p> <b><u><h1>Contact info:</u></b> <br> " +
"<b>" + name + " | " + phone + " </h1></b></p>" +
"<hr>" +
"<h1>" + title + "</h1>" +
"<h2>31905 IH 10 West Boerne TX 78006</h2>" +
"<h2> Sale By: Agent/Broker</h2>" +
"<h2>$" + price + "</h2>" +
"<p><b><big><u>KEY FEATURES</u></big></b><br>" +
"<b>Sq Footage: </b> " + sqft + " sqft <br>" +
"<b>Bedrooms: </b>" + beds + " Bed(s)<br>" +
"<b>Bathrooms: </b>" + baths + " Bath(s)<br>" +
"<b>Property Category: </b>" + newused + "<br>" +
"<b>Manufacturer: </b>Oak Creek Homes<br>" +
"<b>Width: </b>" + width + "<br>" +
"<b>Length: </b>" + length + "<br><br>" +
"<b><u>OTHER DETAILS AVAILABLE</u></b>" +
"<hr>" +
"<h2><b>" + newused + " 2017 Mobile Home from Oak Creek Homes<br>" + model + "</b>" +
"<h3><b>Special Online Pricing - contact " + name + " at " + phone + " for pricing sheet and more info!</b></h3>" +
"<hr>" +
"<u><b>Features that come STANDARD:</b></u>" +
"<ul>" +
"<li>" + feature1 + "</li>" +
"<li>" + feature2 + "</li>" +
"<li>" + feature3 + "</li>" +
"<li>" + feature4 + "</li>" +
"<li>" + feature5 + "</li>" +
"</ul>" +
"<hr>" +
"<b><h2>All this for only $" + price + " - call " + name + " at " + phone + " for more info or to come see the house!</b></h2><hr>" +
"<ul>" +
"<li>**Price does not include delivery, setup, or A/C</li>" +
"</ul>" +
"<hr>" +
"Additional Links: " + link + "<hr><br><br>" +
"mobile home, manufactured home, modular home, tiny home, tiny house, cheap house, cheap home, palm harbor, clayton homes, palm harbor homes, titan direct mobile home, oak creek home, oak creek homes, mobile homes texas, mobile home san antonio, manufactured home san antonio, modular home texas, repo home, repossesssed home, foreclosure, foreclosed, cheap home, cheap house, used home, used house, single wide, double wide, triple wide, titan factory direct";
}
//-->
</script>
</head>
<body style="margin: 10; padding: 10;"><br>
<form>
Posting Title<br>
<input type="text" name="title" id="title" /><br>
<br>
Name:
<input type="text" name="name" id="name" /><br>
Phone:
<input type="text" name="phone" id="phone" /><br>
Price:
<input type="text" name="price" id="price" /><br>
Bedrooms:
<input type="text" name="bedrooms" id="bedrooms" /><br>
Bathrooms:
<input type="text" name="bathrooms" id="bathrooms" /><br>
Model:
<input type="text" name="model" id="model" /><br>
Length:
<input type="text" name="length" id="length" /><br>
Width:
<input type="text" name="width" id="width" /><br>
Square Feet:
<input type="text" name="sqft" id="sqft" /><br>
Single or Double:
<input type="text" name="sections" id="sections" /><br>
New or Used:
<input type="text" name="new-used" id="new-used" /><br>
Feature 1:
<input type="text" name="featureOne" id="featureOne" /><br>
Feature 2:
<input type="text" name="featureTwo" id="featureTwo" /><br>
Feature 3:
<input type="text" name="featureThree" id="featureThree" /><br>
Feature 4:
<input type="text" name="featureFour" id="featureFour" /><br>
Feature 5:
<input type="text" name="featureFive" id="featureFive" /><br>
Link:
<input type="text" name="link" id="link" /><br>
<input type="button" value="Generate HTML" onclick= "scrHTML()" id="txtOutput" /><br>
<textarea type="text" id="htmlOutput" style="width:500px;height:300px"></textarea>
</form>
</body>
</html>
Related
Making a grading calculator using javascript
<!DOCTYPE html>
<html>
<head>
<title>Grade Calculator</title>
<script>
function doubleMe()
{
var number;
var total;
number = document.getElementById('txtnumber').value;
number = Number(number);
total = number * 2;
console.log("number(): " + number + " " + total);
number = document.getElementById('txtnumber').value;
number = parseInt(number);
total = number * 2;
console.log("parseInt(): " + number + " " + total);
number = document.getElementById('txtnumber').value;
number = parseFloat(number);
total = number * 2;
console.log("parseFloat(): " + number + " " + total);
document.getElementById('divOutput').innerHTML = total;
}
</script>
</head>
<body>
<h1>Grade Calculator</h1>
Term 1 Mark: <input type = 'text' id = 'txtnumber' /><br><br>
Term 2 Mark: <input type = 'text' id = 'txtnumber' /><br><br>
Term 3 Mark: <input type = 'text' id = 'txtnumber' /><br><br>
Final Exam Mark: <input type = 'text' id = 'txtnumber' /><br><br>
Term 1 Percentage: <input type = 'text' id = 'txtnumber' /><br><br>
Term 2 Percentage: <input type = 'text' id = 'txtnumber' /><br><br>
Term 3 Percentage: <input type = 'text' id = 'txtnumber' /><br><br>
<input type = 'button' value = 'Press Me' onclick = 'doubleMe();' /><br><br>
<div id = 'divOutput'></div>
</body>
</html>
Hi, I'm suppose to be making a Grading calculator where you input your scores and percentages and once you click "press me" it adds up all of your grades and gives you your final grade. But I can't seem to get to work, can someone help me out? please and thank you!
I have made some tweaks into your code where it will take input of Term 1,Term 2, Term 3 & Final Term marks. And will return sum & percentage of them considering marks for each term is out of 100.
<!DOCTYPE html>
<html>
<head>
<title>Grade Calculator</title>
</head>
<body>
<h1>Grade Calculator</h1>
Term 1 Mark: <input type="text" id="txtnumber1" /><br /><br />
Term 2 Mark: <input type="text" id="txtnumber2" /><br /><br />
Term 3 Mark: <input type="text" id="txtnumber3" /><br /><br />
Final Exam Mark: <input type="text" id="txtnumber4" /><br /><br />
Term 1 Percentage: <input type="text" id="txtnumber5" /><br /><br />
Term 2 Percentage: <input type="text" id="txtnumber6" /><br /><br />
Term 3 Percentage: <input type="text" id="txtnumber7" /><br /><br />
<input type="button" value="Press Me" onclick="percentage();" /><br /><br />
<div id="divOutpuTotal"></div>
<div id="divOutputPercentage"></div>
<script>
function percentage() {
var total;
var total =
Number(document.getElementById("txtnumber1").value) +
Number(document.getElementById("txtnumber2").value) +
Number(document.getElementById("txtnumber3").value) +
Number(document.getElementById("txtnumber4").value);
document.getElementById("divOutpuTotal").innerHTML = total;
document.getElementById("divOutputPercentage").innerHTML = total / 4;
}
</script>
</body>
</html>
You can improve logic more based on your specific requirement.
Trying to enter data into a form then display the data on the same page and in a pop up window
Every time I fill in the whole form the data disappears. If i just fill out three inputs it displays fine, but when I enter the final piece of data and hit display it erases everything. then i also need the data to display in a pop up window. I have been starting at the code for too long i think.
function displayData() {
var a = document.getElementById("name").value;
var b = document.getElementById("add").value;
var c = document.getElementById("phone").value;
var d = document.getElementById("course").value;
var e = document.getElementById("email").value;
data1.innerHTML = ("<ul><li><strong>Name:</strong>" + a + "</li>" +
"<li><strong>Address:</strong>" + b + "</li>" +
"<li><strong>Phone:</strong>" + c + "</li>" +
"<li><strong>Courses:</strong>" + d + "</li>" +
"<li><strong>Email:</strong>" + e + "</li></ul>");
}
<form>
<p align="center">
<lable><b>Name:</b></lable>
<input type="text" id="name" required/>
<br>
</p>
<p align="center">
<lable><b>Address:</b></lable>
<input type="text" id="add" required/>
<br>
</p>
<p align="center">
<lable><b>Phone:</b></lable>
<input type="tel" id="phone" required/>
<br>
</p>
<p align="center">
<lable><b>Email:</b></lable>
<input type="text" id="email" required/>
<br>
</p>
<p align="center">
<select class="scrol" id="course" size="3" width="15px">
<option>Android</option>
<option>Java</option>
<option>C#</option>
<option>Data Base</option>
</select>
</p>
<br>
<p align="center">
<button type="submit" onclick="displayData()">Display</button>
<button type="reset">Reset</button>
</p>
</form>
Message is:
<p id="data1"></p>
I outputs fine until i fill everything in. any assistance is appreciated
How to prevent form from being submitted?
function displayData(event) {
event.preventDefault();
var a = document.getElementById("name").value;
var b = document.getElementById("add").value;
var c = document.getElementById("phone").value;
var d = document.getElementById("course").value;
var e = document.getElementById("email").value;
var message = document.getElementById("data1");
data1.innerHTML = ("<ul><li><strong>Name:</strong>" + a + "</li>" +
"<li><strong>Address:</strong>" + b + "</li>" +
"<li><strong>Phone:</strong>" + c + "</li>" +
"<li><strong>Courses:</strong>" + d + "</li>" +
"<li><strong>Email:</strong>" + e + "</li></ul>");
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet" />
<form>
<label>Name:
<input type="text" id="name" required/></label>
<label>Address:
<input type="text" id="add" required/></label>
<label>Phone:
<input type="tel" id="phone" required/></label>
<label>Email:
<input type="text" id="email" required/></label>
<select id="course">
<option>Android</option>
<option>Java</option>
<option>C#</option>
<option>Data Base</option>
</select>
<button onclick="displayData(event)">Display</button>
<button type="reset">Reset</button>
</form>
Message is:
<p id="data1"></p>
Operations on Javascript Array Element
With the following code, in the function placeOrder() I cannot get the calculations to work using the price[] array elements and the chairAmtA(and the following amount variables I have). It always returns the answer as NaN. What is wrong with the code and how do I fix it?
<title>
Ryan Weiland, Assignment 2
</title>
<!--Load stylesheet-->
<link rel="stylesheet" type="text/css" href="assignment2.css">
<!--Load description variables-->
<script type="text/javascript" src="script.js" >
</script>
<script>
<!--Initilize variables for calculations-->
var chairCost = 50;
var deskCost = 150;
var rockerCost = 250;
var tableCost = 200;
var ftstlCost = 75;
var fname;
var lname;
var streetName;
var cityName;
var state;
var zip;
var phoneOne;
var phoneTwo;
var phoneThree;
var chairAmt;
var deskAmt;
var rockerAmt;
var tableAmt;
var ftstlAmt;
function orderTotal(){
//window.alert("This Function Works");
//Personal Information
var fname = document.items.first.value;
var lname = document.items.last.value;
var streetName = document.items.street.value;
var cityName = document.items.city.value;
var state = document.items.state.value;
var zip = document.items.zipCode.value;
var phoneOne = document.items.pOne.value;
var phoneTwo = document.items.pTwo.value;
var phoneThree = document.items.pThree.value;
//Item Aomount
chairAmt = document.items.chairs.value;
deskAmt = document.items.desks.value;
rockerAmt = document.items.rockers.value;
tableAmt = document.items.tables.value;
ftstlAmt = document.items.ftstls.value;
//Calculations
//Chair Total
var costChairT = chairAmt*chairCost;
//Desk Total
var costDeskT = deskAmt*deskCost;
//Rocker Total
var costRockerT = rockerAmt*rockerCost;
//Table Total
var costTableT = tableAmt*tableCost;
//Footstool Total
var costFtstlT = ftstlAmt*ftstlCost;
//Overall Total Cost
var totalCost = costChairT + costDeskT + costRockerT + costTableT + costFtstlT;
//Personal Total
var personalTotal = fname + " " + lname + "\n" + streetName + ", \n" + cityName + " " + state + ", \n" + zip + "\nPhone Number: " + phoneOne + "- " + phoneTwo + "- " +phoneThree + "\n";
//New window with everything retrieved
window.alert(personalTotal + "Total Cost: $" + totalCost);
}
function placeOrder(chairsAmt, desksAmt, rockersAmt, tablesAmt, ftstlsAmt) {
//window.alert("placeOrder runs");
var order = [];
//Prices in array
var prices = [50, //Chair
150, //Desk
250, //Rocking Chair
200, //Table
75]; //Footstool
//Personal Information
order[0] = document.items.first.value;
order[1] = document.items.last.value;
order[2] = document.items.street.value;
order[3] = document.items.city.value;
order[4] = document.items.state.value;
order[5] = document.items.zipCode.value;
order[6] = document.items.pOne.value;
order[7] = document.items.pTwo.value;
order[8] = document.items.pThree.value;
//Item Aomount
var chairAmtA = document.items.chairs.value;
var deskAmtA = document.items.desks.value;
var rockerAmtA = document.items.rockers.value;
var tableAmtA = document.items.tables.value;
var ftstlAmtA = document.items.ftstls.value;
var prices = "Prices\nChair: " + prices[0] + "\nDesk: " + prices[1] + "\nRocking Chair: " + prices[2] + "\nTable: " + prices[3] + "\nFootstool: " + prices[4] + "\n\n";
//Chair Total
var chairCostA = chairAmtA * prices[0];
//Desk Total
var deskCostA = deskAmtA * prices[1];
//Rocker Total
var rockerCostA = rockerAmtA * prices[2];
//Table Total
var tableCostA = tableAmtA * prices[3];
//Footstool Total
var ftstlCostA = ftstlAmtA * prices[4];
//Overall Total Cost
var totalCostA = chairCostA + deskCostA + rockerCostA + tableCostA + ftstlCostA;
//Personal Total
personalTotalA= order[0] + " " + order[1] + "\n"
+ order[2] + ", " + order[3] + "\n"
+ order[4] + ", " + order[5] + "\n"
+ "Phone Number: " + order[6] + "-" + order[7] + "-" + order[8] + "\n\n";
//Quantity ordered
var quantity = "Chairs Ordered: " + chairAmtA + "\nDesks Ordered: " + deskAmtA + "\nRocking Chairs Ordered: " + rockerAmtA + "\nTables Ordered: " + tableAmtA + "\nFootstools Ordered: " + ftstlAmtA + "\n\n";
//New window with everything retrieved
var x = window.confirm(personalTotalA + quantity + prices + "\nTotal Cost: $" + totalCostA);
if(x ==true)
window.alert("Your order has been placed!");
else
window.alert("Your order has been cancled.");
}
</script>
<h1>Swanson's Woodworking</h1>
<h2>Customer Order Form</h2>
<br />
<!--List of items-->
<form name="items">
<br />
<br />
<!--Chair-->
Click the button for a description.
<input type="radio" name="items" onclick="document.item.itemDesc2.value=chairDesc" />
<b>Chair($50)</b>
<br />
<!--Desk-->
Click the button for a description.
<input type="radio" name="items" onclick="document.item.itemDesc2.value=deskDesc" />
<b>Desk($150)</b>
<br />
<!--Rocking Chair-->
Click the button for a description.
<input type="radio" name="items" onclick="document.item.itemDesc2.value=rockerDesc" />
<b>Rocking Chair($250)</b>
<br />
<!--Table-->
Click the button for a description.
<input type="radio" name="items" onclick="document.item.itemDesc2.value=tableDesc" />
<b>Table($200)</b>
<br />
<!--Footstool-->
Click the button for a description.
<input type="radio" name="items" onclick="document.item.itemDesc2.value=ftstlDesc" />
<b>Footstool($75)</b>
<br />
<!--Textarea for descriptions-->
<p>
<textarea name="itemDesc2" cols="30" rows="5" style="background-color: transparent; border: 1; font-size:20px; overflow: hidden; color: #5e0000">
</textarea>
</p>
<!--Information Form-->
<!--Personal Information-->
First Name: <input type="text" name="first">
<br /><br />
Last Name : <input type="text" name="last">
<br /><br />
Street Address:<input type="text" name="street">
<br /><br />
City: <input type="text" name="city">
<br /><br />
State: <input type="text" name="state">
<br /><br />
Zip Code: <input type="text" name="zipCode">
<br /><br />
Phone Number: (<input type="text" name="pOne" size="3">) - <input type="text" name="pTwo" size="3"> - <input type="text" name="pThree" size="4">
<br /><br />
<!--List of items-->
Chairs Desired: <input type="number" name="chairs">
<br /><br />
Desks Desired: <input type="number" name="desks">
<br /><br />
Rocking Chairs Desired: <input type="number" name="rockers">
<br /><br />
Tables Desired: <input type="number" name="tables">
<br /><br />
Footstools Desired: <input type="number" name="ftstls">
<br /><br />
</form>
<!--Calculate your total order.-->
<input type = "button" onclick = "orderTotal()" value = "Calculate your total order" > <!--Button for total-->
<br /><br >
<input type = "button" onclick = "placeOrder()" value = "Place Order" > <!--Button for total-->
Looks like youre trying to subtract two strings:
console.log("12"-"13");
You need to convert all inputs ( they are strings) to numbers:
val=input.value.toNumber();
Or:
val=(+input.value);
Output in Textarea from User Input
PROBLEM SOLVED
I just started learning JavaScript, and I came across a problem while coding a quick tool for a game that I play. I want users to be able to input a couple of things via an HTML Form and I want the JS Script to take that input and turn it into an SQL.
Here is my HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HabSQL - Online SQL Generator</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href="css/styles.css" rel='stylesheet' type='text/css'>
</head>
<body>
<header>Welcome to HabSQL v1.0! The Online Habbo SQL Generator!</header>
<p>HabSQL is strictly for use with Habbo Furniture SQLs and Data. Please enter all necessary information accordingly.</p>
<script src="scripts/habSQL.js"></script>
<form action="javascript:void(habSQL())">
<fieldset>
Furniture Name: <input id="furniName" type="text">
Furniture ID: <input id="furniID" type="number"><br>
SWF File Name: <input id="fileName" type="text"> (Exclude .SWF)<br>
Sprite ID: <input id="spriteID" type="number"> (We recommend that you use the same ID as Furniture ID).
</fieldset>
<fieldset>
Furniture Type: <input id="furniType" type="radio" value="s" name="furniType">Floor <input id="furniType" type="radio" value="i" name="furniType">Wall <input id="furniType" type="radio" value="e" name="furniType">Effect<br>
</fieldset>
<fieldset>
Furniture Width: <input id="furniWidth" type="number" class="dimensions"> Furniture Length: <input id="furniLength" type="number" class="dimensions"> Furniture Height: <input id="furniHeight" type="number" class="dimensions"><br>
Can you stack furniture on it? <input id="canStack" type="radio" value="1" name="canStack">Yes <input id="canStack" type="radio" value="0" name="canStack">No<br>
Can you sit on it? <input id="canSit" type="radio" value="1" name="canSit">Yes <input id="canSit" type="radio" value="0" name="canSit">No<br>
Can you walk on/through it? <input id="canWalk" type="radio" value="1" name="canWalk">Yes <input id="canWalk" type="radio" value="0" name="canWalk">No<br>
Can you recycle it? <input id="canRecycle" type="radio" value="1" name="canRecycle">Yes <input id="canRecycle" type="radio" value="0" name="canRecycle">No<br>
Can you trade it? <input id="canTrade" type="radio" value="1" name="canTrade">Yes <input id="canTrade" type="radio" value="0" name="canTrade">No<br>
Can you sell it on the Marketplace? <input id="canSell" type="radio" value="1" name="canSell">Yes <input id="canSell" type="radio" value="0" name="canSell">No<br>
Can you give it to someone as a gift? <input id="canGive" type="radio" value="1" name="canGive">Yes <input id="canGive" type="radio" value="0" name="canGive">No<br>
Can you stack it in the inventory? <input id="invStack" type="radio" value="1" name="invStack">Yes <input id="invStack" type="radio" value="0" name="invStack">No<br>
</fieldset>
<fieldset>
Interaction Type:<br>
<input id="intType" type="radio" value="default" name="intType">None<br>
<input id="intType" type="radio" value="bed" name="intType">Bed<br>
<input id="intType" type="radio" value="vendingmachine" name="intType">Vending Machine<br>
<input id="intType" type="radio" value="trophy" name="intType">Trophy<br>
<input id="intType" type="radio" value="gate" name="intType">Gate<br>
<input id="intType" type="radio" value="onewaygate" name="intType">One Way Gate<br>
<input id="intType" type="radio" value="dice" name="intType">Dice<br>
<input id="intType" type="radio" value="teleport" name="intType">Teleporter<br>
(More Interaction Types Coming in v2.0)<br>
</fieldset>
<fieldset>
How many interactions does the furniture have? (i.e. a dice has 6 sides and a closed side, therefore 7 interactions.)<br>
<input id="intCount" type="number"><br>
If your furniture gives out an item, what is the item's ID? 0, if none. (View external_flash_texts.txt or external_flash_texts.xml for ID #'s.)<br>
<input id="vendingID" type="number"><br>
</fieldset>
<input type="Submit" value="Generate!">
</form>
Furniture SQL:<br>
<textarea id="furniSQL" readonly="true" rows="10" cols="50"></textarea>
</body>
</html>
And here is my JS:
// HabSQL - Online Habbo SQL Generator
// Developed by Thomas Yamakaitis - March 3, 2015
function habSQL() {
var furniID = document.getElementById('furniID').value;
var furniName = document.getElementById('furniName').value;
var fileName = document.getElementById('fileName').value;
var furniType = document.getElementById('furniType').value;
var furniWidth = document.getElementById('furniWidth').value;
var furniLength = document.getElementById('furniLength').value;
var furniHeight = document.getElementById('furniHeight').value;
var canStack = document.getElementById('canStack').value;
var canSit = document.getElementById('canSit').value;
var canWalk = document.getElementById('canWalk').value;
var spriteID = document.getElementById('spriteID').value;
var canRecycle = document.getElementById('canRecycle').value;
var canTrade = document.getElementById('canTrade').value;
var canSell = document.getElementById('canSell').value;
var canGive = document.getElementById('canGive').value;
var invStack = document.getElementById('invStack').value;
var intType = document.getElementById('intType').value;
var intCount = document.getElementById('intCount').value;
var vendingID = document.getElementById('vendingID').value;
var comma = ", ";
var commaQuotes = "', '";
var quoteComma = "', ";
var commaQuote = ", '";
document.getElementById('furniSQL').innerHTML = "INSERT INTO `furniture` (`id`, `public_name`, `item_name`, `type`, `width`, `length`, `stack_height`, `can_stack`, `can_sit`, `is_walkable`, `sprite_id`, `allow_recycle`, `allow_trade`, `allow_marketplace_sell`, `allow_gift`, `allow_inventory_stack`, `interaction_type`, `interaction_modes_count`, `vending_ids`, `is_arrow`, `foot_figure`, `height_adjustable`, `effectM`, `effectF`, `HeightOverride`) VALUES (" + furniId + commaQuote + furniName + commaQuotes + fileName + commaQuotes + furniType + quoteComma + furniWidth + comma + furniLength + comma + furniHeight + commaQuote + canStack + commaQuotes + canSit + commaQuotes + canWalk + quoteComma + spriteID + commaQuote + canRecycle + commaQuotes + canTrade + commaQuotes + canSell + commaQuotes + canGive + commaQuotes + invStack + commaQuotes + intType + quoteComma + intCount + comma + vendingID + ");";
}
I can't seem to pinpoint exactly what it is that I am doing wrong. If somebody could please assist me, that would be greatly appreciated.
Thanks!
Thanks to a few users here! The solution was a typo and I believe it was also value instead of innerHTML too.
A simple typo: furniId instead of furniID on the last line JavaScript is case-sensitive so if you capitalize a variable name differently it's a completely different variable, and so it does not know what you mean.
You got a typo: furniID in your last element which is document.getElementById('furniSQL').value= is spelled as furniId
Textareas are modified by value, not innerHTML
so set it up to
document.getElementById('furniSQL').value = "INSERT INTO `furniture` (`id`, `public_name`, `item_name`, `type`, `width`, `length`, `stack_height`, `can_stack`, `can_sit`, `is_walkable`, `sprite_id`, `allow_recycle`, `allow_trade`, `allow_marketplace_sell`, `allow_gift`, `allow_inventory_stack`, `interaction_type`, `interaction_modes_count`, `vending_ids`, `is_arrow`, `foot_figure`, `height_adjustable`, `effectM`, `effectF`, `HeightOverride`) VALUES (" + furniId + commaQuote + furniName + commaQuotes + fileName + commaQuotes + furniType + quoteComma + furniWidth + comma + furniLength + comma + furniHeight + commaQuote + canStack + commaQuotes + canSit + commaQuotes + canWalk + quoteComma + spriteID + commaQuote + canRecycle + commaQuotes + canTrade + commaQuotes + canSell + commaQuotes + canGive + commaQuotes + invStack + commaQuotes + intType + quoteComma + intCount + comma + vendingID + ");";
and you should be good to go.
JS Average calculator
I cant get everything centered.
this is what i get:
xxx xxx xxx xxx xxx
what I want is
xxx
xxx
xxx
xxx
xxx
centered horizonally in the webpage
I also cant get the average functionality to work.I dont know where I am going wrong.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Average Calculator</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<h1 style="text-align:center;">My Average Calculator</h1>
<script type="text/javascript">
function getTotal() {
var form = document.getElementById('number');
var numb1 = parseInt(form.numb1.value);
var numb2 = parseInt(form.numb2.value);
var numb3 = parseInt(form.numb3.value);
var numb4 = parseInt(form.numb4.value);
var numb5 = parseInt(form.numb5.value);
var total = document.getElementById('total');
var average = document.getElementById('average');
if (!numb1) {
numb1 = 0;
}
if (!numb2) {
numb2 = 0;
}
if (!numb3) {
numb3 = 0;
}
if (!numb4) {
numb4 = 0;
}
if (!numb5) {
numb5 = 0;
}
total.innerHTML = 'Total: ' + (numb1 + numb2 + numb3 + numb4 + numb5);
average.innerHTML = 'Average: ' + (total / 5);
}
</script>
</head>
<form id="number">
<body>
First Number: <input type="text" name="numb1" onkeyup="getTotal ();" />
Second Number: <input type="text" name="numb2" onkeyup="getTotal();" />
Third Number: <input type="text" name="numb3" onkeyup="getTotal();" />
Fourth Number: <input type="text" name="numb4" onkeyup="getTotal();" />
Fifth Number: <input type="text" name="numb5" onkeyup="getTotal();" />
<div id="total">Total: </div>
<div id="average">Average: </div>
</body>
</html>
total / 5, where total is an element you fetched by ID. No wonder it doesn't work ;)
Also, you may want to learn about loops. Instead of numb1 through numb5, iterate.
Something like this could work nicely:
<fieldset id="numbers"><legend>Numbers</legend>
First number: <input type="number" onkeyup="getTotal();" onchange="getTotal();" /><br />
Second number: <input type="number" onkeyup="getTotal();" onchange="getTotal();" /><br />
Third number: <input type="number" onkeyup="getTotal();" onchange="getTotal();" /><br />
Fourth number: <input type="number" onkeyup="getTotal();" onchange="getTotal();" /><br />
Fifth number: <input type="number" onkeyup="getTotal();" onchange="getTotal();" />
</fieldset>
<div id="total">Total: --</div>
<div id="average">Average: --</div>
<script type="text/javascript">
function getTotal() {
var inputs = document.getElementById('numbers').getElementsByTagName('input'),
count = inputs.length, i, total = 0;
for( i=0; i<count; i++) total += parseInt(inputs[i].value || "0",10);
document.getElementById('total').firstChild.nodeValue = "Total: "+total;
document.getElementById('average').firstChild.nodeValue = "Average: "+(total/count);
}
</script>
add BR tag <br/> at the end of every input tag and change this average.innerHTML = 'Average: ' + ((numb1 + numb2 + numb3 + numb4 + numb5) / 5);