获取 html 输入并生成输出答案

【问题标题】：Taking html input and generating output获取 html 输入并生成输出
【发布时间】：2017-06-24 18:10:34
【问题描述】：

有人可以帮助我更接近做我想做的事情吗？我是 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>

【问题讨论】：

您应该先阅读 craiglist API 文档，然后如果您能够在实践中利用这些知识，请自行回答：craigslist.org/about/bulk_posting_interface。如果您问我，通过使用 API 开始 Web 开发通常不是一个好主意。
我很欣赏有关 API 的提示 - 我不希望通过他们的 API 将此信息发送到 craigslist。我知道我写的东西听起来那样 - 我的错。

标签： javascript html templates input output

【解决方案1】：

也许这就是您正在寻找的。我添加了一个隐藏的 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>

【讨论】：

【解决方案2】：

感谢您的回答 - 以下是我决定用作最佳答案的答案。

<!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>

【讨论】：