堆栈内存溢出
  繁体   English   中英

打印多个 <p> 内的标签 <div> 使用JavaScript

[英]Printing Multiple <p> Tags within a <div> Using JavaScript

 原文  2015-02-19 06:38:02  2   3    javascript/ html/ function/ innerhtml

问题描述

我正在尝试使用JavaScript创建一些html <p>和<div>标记，其中包含一些信息。我遇到的问题是我的totalAmountPrintOut函数仅在#printDivOut<div内返回1个<p>标记。 >当我希望它返回时8.如果有人可以帮助我解决此问题，我将非常感激。 

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="input1-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="Jerry Reimer" content="Cake Baby Bakery Recipe Calculator">
    <title>Cake Baby Bakery Recipe Calculator</title>
    <script src="/common/ajaxCheat.js"></script>
    <style>
        .starter-template {
            padding: 40pinput1 15pinput1;
            teinput1t-align: center;
        }
    </style>
    <script src="/common/ajaxCheat.js"></script>
</head>

<body>  
    <div id="wholePage" >
        <img src="img1.png" alt="Cake Baby">
        <div id="title">Cake Baby</div>


        <div id="cakeHook" >
            <div id="displayBlock1">
                <div id="recipe1Div">
                    Chocolate Cake (per cake): <br> 1.75 cups of Flour, 2 cup of Sugar, 2 Eggs, 1.5 tsp Baking Powder and 1.75 tsp of Baking Soda and 0.75 cups of Chocolate Powder
                </div>

                <form >
                        <input type="number" name="recipe1" min="0" mainput1="10000" value="0" id="form1">
                </form>
            </div>
            <div id="displayBlock2">
                <div id="recipe2Div">
                    Cookies (per two dozen): <br> 0.5 cup butter, 1.5 cups of flour, 0.5 tsp Baking Powder, 1 Egg, 1 Cup of Chocolate Chips, 3.0 cups sugar
                </div>
                <form >
                        <input type="number" name="recipe2" min="0" mainput1="10000" value="0" id="form2">
                </form> 
            </div>

            <button id="calculateButton">
                Calculate
            </button>

            <div id="Total">
                Total
                <form id="output">
                    <output id="totalCalculation">

                    </output>
                </form>
            </div>

        </div>


    </div>

    <div id="printOutDiv">

    </div>

    <script>
        //costPrintOut object constructor
        var costPrintOut = function(bodyText) {
            this.body = bodyText;
            this.printOut = function() {
                var printOutDiv = document.getElementById("printOutDiv");
                var costPrintOutDiv = document.createElement("div");
                costPrintOutDiv.innerHTML = "<p>" + "The total cost of the recipe's is: $" + this.body + "</p>";
                printOutDiv.appendChild(costPrintOutDiv);
            };
        };

        //totalAmountPrintOut object constructor
        var totalAmountPrintOut = function(bodyText1,bodyText2,bodyText3,bodyText4,bodyText5,bodyText6,bodyText7,bodyText8) {
            this.body1 = bodyText1;
            this.body2 = bodyText2;
            this.body3 = bodyText3;
            this.body4 = bodyText4;
            this.body5 = bodyText5;
            this.body6 = bodyText6;
            this.body7 = bodyText7;
            this.body8 = bodyText8;
            this.printOutRecipe = function() {
                var printOutDiv = document.getElementById("printOutDiv");
                var amountPrintOutDiv = document.createElement("div");
                amountPrintOutDiv.innerHTML = "<p>" + "The total amount flour from the recipes is " + this.body1 + " cups." + "</p>";
                amountPrintOutDiv.innerHTML = "<p>" + "The total amount flour from the recipes is " + this.body2 + " cups." + "</p>";
                amountPrintOutDiv.innerHTML = "<p>" + "The total amount flour from the recipes is " + this.body3 + " cups." + "</p>";
                amountPrintOutDiv.innerHTML = "<p>" + "The total amount flour from the recipes is " + this.body4 + " cups." + "</p>";
                amountPrintOutDiv.innerHTML = "<p>" + "The total amount flour from the recipes is " + this.body5 + " cups." + "</p>";
                amountPrintOutDiv.innerHTML = "<p>" + "The total amount flour from the recipes is " + this.body6 + " cups." + "</p>";
                amountPrintOutDiv.innerHTML = "<p>" + "The total amount flour from the recipes is " + this.body7 + " cups." + "</p>";
                amountPrintOutDiv.innerHTML = "<p>" + "The total amount flour from the recipes is " + this.body8 + " cups." + "</p>";
                printOutDiv.appendChild(amountPrintOutDiv);
            };
        };
        //function that steps through and parses JSON text  
        //passed to ajax get code
        var callback = function(text){
            var parsedData = JSON.parse(text);
            console.log(parsedData);




            //retrieve input values
            var input1 = document.getElementById("form1").value;
            var input2 = document.getElementById("form2").value;

            //calculate total amount of ingredients  & total cost of each ingredient
            var totalAmountofFlourIngredientForCake = input1 * (parsedData[0].recipes[0].ingredients[0].Flour);
            var totalAmountofSugarIngredientForCake = input1 * (parsedData[0].recipes[0].ingredients[0].Sugar);
            var totalAmountofEggsIngredientForCake = input1 * (parsedData[0].recipes[0].ingredients[0].Eggs);
            var totalAmountofBakingPowderIngredientForCake = input1 * (parsedData[0].recipes[0].ingredients[0].BakingPowder);
            console.log(totalAmountofBakingPowderIngredientForCake);
            var totalAmountofBakingSodaIngredientForCake = input1 * (parsedData[0].recipes[0].ingredients[0].BakingSoda);
            var totalAmountofChocolatePowderIngredientForCake = input1 * (parsedData[0].recipes[0].ingredients[0].ChocolatePowder);

            var costOfflourIngredientTotalForCake = totalAmountofFlourIngredientForCake * (parsedData[0].products[0].cost);
            var costOfsugarIngredientTotalForCake = totalAmountofSugarIngredientForCake * (parsedData[0].products[1].cost);
            var costOfeggIngredientTotalForCake = totalAmountofEggsIngredientForCake * (parsedData[0].products[2].cost);
            var costOfbakingpowderIngredientTotalForCake = totalAmountofBakingPowderIngredientForCake  * (parsedData[0].products[3].cost);
            var costOfbakingSodaIngredientTotalForCake = totalAmountofBakingSodaIngredientForCake  * (parsedData[0].products[4].cost);
            var costOfchocPowderIngredientTotalForCake = totalAmountofChocolatePowderIngredientForCake  * (parsedData[0].products[5].cost);

            var totalAmountofFlourIngredientForCookies = input2 * (parsedData[0].recipes[1].ingredients[0].Flour);
            var totalAmountofSugarIngredientForCookies = input2 * (parsedData[0].recipes[1].ingredients[0].Sugar);
            var totalAmountofEggsIngredientForCookies = input2 * (parsedData[0].recipes[1].ingredients[0].Eggs);
            var totalAmountofBakingPowderIngredientForCookies = input2 * (parsedData[0].recipes[1].ingredients[0].BakingPowder);
            console.log(parsedData[0].recipes[1].ingredients[0].BakingPowder);
            console.log(totalAmountofBakingPowderIngredientForCookies);
            var totalAmountofButterIngredientForCookies = input2 * (parsedData[0].recipes[1].ingredients[0].Butter);
            var totalAmountofChocolateChipIngredientForCookies = input2 * (parsedData[0].recipes[1].ingredients[0].ChocolateChips);

            var costOfbutterIngredientTotalForCookies = totalAmountofButterIngredientForCookies * (parsedData[0].products[7].cost);
            var costOfflourIngredientTotalForCookies = totalAmountofFlourIngredientForCookies * (parsedData[0].products[0].cost);
            var costOfsugarIngredientTotalForCookies = totalAmountofSugarIngredientForCookies * (parsedData[0].products[1].cost);
            var costOfeggsIngredientTotalForCookies = totalAmountofEggsIngredientForCookies * (parsedData[0].products[2].cost);
            var costOfbakingPowderIngredientTotalForCookies = totalAmountofBakingPowderIngredientForCookies * (parsedData[0].products[3].cost);
            var costOfchocolateChipsIngredientTotalForCookies = totalAmountofChocolateChipIngredientForCookies * (parsedData[0].products[6].cost);

            //add amount of ingredients together from cookies and cake recipes
            var totalAmountofFlour = totalAmountofFlourIngredientForCookies + totalAmountofFlourIngredientForCake;
            var totalAmountofSugar = totalAmountofSugarIngredientForCake + totalAmountofSugarIngredientForCookies;
            var totalAmountofEggs = totalAmountofEggsIngredientForCake + totalAmountofEggsIngredientForCookies;
            var totalAmountofBakingPowder = totalAmountofBakingPowderIngredientForCake + totalAmountofBakingPowderIngredientForCookies;
            console.log(totalAmountofBakingPowder);
            var totalAmountofBakingSoda = totalAmountofBakingSodaIngredientForCake;
            var totalAmountofChocPowder = totalAmountofChocolatePowderIngredientForCake;
            var totalAmountofChocChips = totalAmountofChocolateChipIngredientForCookies;
            var totalAmountofButter = totalAmountofButterIngredientForCookies; 

            //add cost of ingredients together from cookies and cake recipes
            var totalCostofFlour = costOfflourIngredientTotalForCake + costOfflourIngredientTotalForCookies;
            var totalCostofSugar = costOfsugarIngredientTotalForCake + costOfsugarIngredientTotalForCookies;
            var totalCostofEggs = costOfeggIngredientTotalForCake + costOfeggsIngredientTotalForCookies;
            var totalCostofBakingPowder = costOfbakingpowderIngredientTotalForCake + costOfbakingPowderIngredientTotalForCookies;
            var totalCostofBakingSoda = costOfbakingSodaIngredientTotalForCake;
            var totalCostofChocPowder = costOfchocPowderIngredientTotalForCake;
            var totalCostofChocChips = costOfchocolateChipsIngredientTotalForCookies;
            var totalCostofButter = totalAmountofButterIngredientForCookies;
            console.log(totalCostofBakingPowder);

            var totalCost = totalCostofFlour + totalCostofSugar + totalCostofEggs + totalCostofBakingPowder + totalCostofBakingSoda + totalCostofChocPowder + totalCostofChocChips + totalCostofButter;
            console.log(totalCost);

            var displayTotalCost = new costPrintOut(totalCost);
            displayTotalCost.printOut();

            var displayTotalAmountofIngredients = new totalAmountPrintOut(totalAmountofFlour,totalAmountofSugar,totalAmountofEggs,totalAmountofBakingPowder,totalAmountofBakingSoda,totalAmountofChocPowder,totalAmountofChocChips,totalAmountofButter);
            displayTotalAmountofIngredients.printOutRecipe();
        };
        //onClick event that returns text
        document.getElementById("calculateButton").onclick = function() {
            //returning json data
            ajax.get("a1data.json", callback);
        };
    </script>   
</body>

3 个解决方案

解决方案1
 0 已采纳  2015-02-19 06:44:07

    var totalAmountPrintOut = function(bodyText1,bodyText2,bodyText3,bodyText4,bodyText5,bodyText6,bodyText7,bodyText8) {
            this.body1 = bodyText1;
            this.body2 = bodyText2;
            this.body3 = bodyText3;
            this.body4 = bodyText4;
            this.body5 = bodyText5;
            this.body6 = bodyText6;
            this.body7 = bodyText7;
            this.body8 = bodyText8;
            this.printOutRecipe = function() {
                var printOutDiv = document.getElementById("printOutDiv");
                var amountPrintOutDiv = document.createElement("div");
                amountPrintOutDiv.innerHTML = "<p>" + "The total amount flour from the recipes is " + this.body1 + " cups." + "</p>";
                var amountPrintOutDiv1 = document.createElement("div");
                amountPrintOutDiv1.innerHTML = "<p>" + "The total amount flour from the recipes is " + this.body2 + " cups." + "</p>";
                var amountPrintOutDiv2 = document.createElement("div");
                amountPrintOutDiv2.innerHTML = "<p>" + "The total amount flour from the recipes is " + this.body3 + " cups." + "</p>";
                var amountPrintOutDiv3 = document.createElement("div");
                amountPrintOutDiv3.innerHTML = "<p>" + "The total amount flour from the recipes is " + this.body4 + " cups." + "</p>";
                var amountPrintOutDiv4 = document.createElement("div");
                amountPrintOutDiv4.innerHTML = "<p>" + "The total amount flour from the recipes is " + this.body5 + " cups." + "</p>";
                var amountPrintOutDiv5 = document.createElement("div");
                amountPrintOutDiv5.innerHTML = "<p>" + "The total amount flour from the recipes is " + this.body6 + " cups." + "</p>";
                var amountPrintOutDiv6 = document.createElement("div");
                amountPrintOutDiv6.innerHTML = "<p>" + "The total amount flour from the recipes is " + this.body7 + " cups." + "</p>";
                var amountPrintOutDiv7 = document.createElement("div");
                amountPrintOutDiv7.innerHTML = "<p>" + "The total amount flour from the recipes is " + this.body8 + " cups." + "</p>";

                printOutDiv.appendChild(amountPrintOutDiv);
                printOutDiv.appendChild(amountPrintOutDiv1);
                printOutDiv.appendChild(amountPrintOutDiv2);
                printOutDiv.appendChild(amountPrintOutDiv3);
                printOutDiv.appendChild(amountPrintOutDiv4);
                printOutDiv.appendChild(amountPrintOutDiv5);
                printOutDiv.appendChild(amountPrintOutDiv6);
                printOutDiv.appendChild(amountPrintOutDiv7);
            };
        };

解决方案2
 0  2015-02-19 06:51:26

将html分配给amountPrintOutDiv.innerHTML时，您会丢失“ +”。 

amountPrintOutDiv.innerHTML = "<p>" + "The total amount flour from the recipes is " + this.body1 + " cups." + "</p>";
amountPrintOutDiv.innerHTML += "<p>" + "The total amount flour from the recipes is " + this.body2 + " cups." + "</p>";
amountPrintOutDiv.innerHTML += "<p>" + "The total amount flour from the recipes is " + this.body3 + " cups." + "</p>";
amountPrintOutDiv.innerHTML += "<p>" + "The total amount flour from the recipes is " + this.body4 + " cups." + "</p>";
amountPrintOutDiv.innerHTML += "<p>" + "The total amount flour from the recipes is " + this.body5 + " cups." + "</p>";
amountPrintOutDiv.innerHTML += "<p>" + "The total amount flour from the recipes is " + this.body6 + " cups." + "</p>";
amountPrintOutDiv.innerHTML += "<p>" + "The total amount flour from the recipes is " + this.body7 + " cups." + "</p>";
amountPrintOutDiv.innerHTML += "<p>" + "The total amount flour from the recipes is " + this.body8 + " cups." + "</p>";

解决方案3
 0  2015-02-19 06:56:20

问题是您没有将文本追加到innerHTML，而是将其重新分配了8次。 尝试这样的事情： 

amountPrintOutDiv.innerHTML = "<p>text..." + this.body1 + "</p>" +
                              "<p>text..." + this.body2 + "</p>" +
                              "<p>text..." + this.body3 + "</p>" +
                              "<p>text..." + this.body4 + "</p>";

或者，如果必须附加，则可以执行以下操作： 

amountPrintOutDiv.innerHTML = "<p>text..." + this.body1 + "</p>";
amountPrintOutDiv.innerHTML += "<p>text..." + this.body1 + "</p>";
amountPrintOutDiv.innerHTML += "<p>text..." + this.body2 + "</p>";
amountPrintOutDiv.innerHTML += "<p>text..." + this.body2 + "</p>";

另外，如果您发现自己在编写非常重复的代码，请考虑如何将其放入循环中。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 Javascript-在div中定位p标签不会返回任何内容 选择 <p> 在使用javascript的div中 出现特定类后，Javascript将div中的多个p标签包装起来 .find（）顶级 <p> div中的标签 没有P标签的Div上的Javascript JScrollPane 如何使用javascript计算div中锚标签的数量？ javascript替换多个div标签 使用JavaScript在跨多个div标签的网页中搜索文本 Javascript- <a>在div中</a>创建一系列<a>标签</a> 将文本添加到多个div标签中的跨度
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM