有人可以帮我接近做我想做的事吗？我是html / javascript的新手（显然），真的不知道怎么问我想要的。
我只是想为craigslist制作模板制作者。制作一个易于使用的html页面发送给人们，让他们填写输入字段并让它吐出html发布到CL发布块的正文中。
任何方向/指导都将不胜感激。我已经花了大约3个小时，现在不知道该怎么办。
谢谢！
<!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>
答案 0 :(得分：0)
也许这就是你要找的东西。我添加了一个隐藏的div作为结果容器。当用户单击该按钮时，表单将隐藏，并显示带有输出的容器。
我还清理了一下你的代码。
<!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>
正如您所看到的，基本的HTML结构应该是这样的：
<html>
<head>
<script></script>
</head>
<body>
<!-- content here -->
</body>
</html>
答案 1 :(得分：0)
感谢您的回答 - 以下是我决定使用的最佳答案。
<!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>