个人中心
gpt4 book ai didi

javascript - 如何使用数组显示循环中的文本

转载 作者：行者123 更新时间：2023-11-28 06:47:26 25 4
gpt4 key购买 nike

因此，对于作业，我们必须将咖啡描述插入到数组中并循环这些数组，以便它们显示在网页上的其他位置。到目前为止，我在数组和非工作循环中都有描述，所以我不知所措。

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>The Coffee Shop</title>
</head>
<body>
<h1>The Coffee Shop</h1>
<h2>Best coffee in Pennsylvania!</h2>

<form name="drinkList" method="get">
    <script type ="text/javascript">
        /* <![CDATA[ */
        /*
        Javascript code for "Order Form" tag
        */
        // 9/22/2015
        document.write("<p><strong>Order Form</strong>: ");

        var info = new Array(5)
        var drinkInfo = new Array(5)
        drinkInfo[0] = "Plain black coffee brewed from our finest of roasted coffee beans.";
        drinkInfo[1] = "Chocolate mocha flavored, covered in chocolate chips and topped with whipped cream.";
        drinkInfo[2] = "Vanilla flavored iced drink, topped with whipped cream and caramel. (No coffee added)";
        drinkInfo[3] = "Pumpkin flavored latte, with espresso and milk mixed together for a delicious beverage.";
        drinkInfo[4] = "Steamed milk with vanilla-flavored syrup is marked with espresso and topped with caramel drizzle.";

        var money = new Array(5)
        var price = new Array(5)
        price[0] = "$0.99";
        price[1] = "$3.29";
        price[2] = "$2.99";
        price[3] = "$3.99";
        price[4] = "$1.29";

        var coffees = document.getElementsByTagName("b");

        for (var i = 0; i < drinkInfo.length; i++) {
            coffees[i].innerHTML += " " + drinkInfo[i];
        }

        /* ]]> */


             </script> 
                    <!-- Below adds First name, Last name, Phone number, and Payment type. -->
                       <p> 
                           First Name:
                           <input type="text" name="firstName" />
                           <br />
                           <br />
                           Last Name:
                           <input type="text" name="lastName" />
                           <br />
                           <br />
                           Phone Number *(123)-456-7890*:
                           <input type="text" name="phoneNumber" />
                           <br />
                           <br />
                           Payment Type:
                           <select name="options">
                           <option>Choose One</option>
                           <option>Visa</option>
                           <option>Mastercard</option>
                           <option>Paypal</option>
                           </select>
                        <p> <!-- Textboxes for drinks -->
                            <strong>Enter quantity for your choice of drink:</strong>
                            <br />
                            <br />
                            <input type="text" name="quant1" value="0" style="width: 25px;" /> <b>Black Coffee:</b>
                            <br />
                            <input type="text" name="quant2" value="0" style="width: 25px;" /> <b>Loco Mocha:</b>
                            <br />
                            <input type="text" name="quant3" value="0" style="width: 25px;" /> <b>Vanilla Bean Frappuccino:</b>
                            <br />
                            <input type="text" name="quant4" value="0" style="width: 25px;" /> <b>Pumpkin Spice Latte:</b>
                            <br />
                            <input type="text" name="quant5" value="0" style="width: 25px;" /> <b>Caramel Macchiato:</b>
                            <br />
                        </p>
                           <!-- Adds extra choices -->
                           <strong>Select any extras:</strong>
                           <br />
                           <br />
                           <input type="text" name="whip" value="0" style="width: 25px;" /> Whipped Cream
                           <br />
                           <input type="text" name="cream" value="0" style="width: 25px;"  /> Cream
                           <br />
                           <input type="text" name="sugar" value="0" style="width: 25px;" /> Sugar
                           <br />
                           <input type="text" name="chocolate" value="0" style="width: 25px;" /> Chocolate
                           <br />
                           <input type="text" name="caramel2" value="0" style="width: 25px;" /> Caramel
                           <br />
                           <br />

                           <!-- Submit button -->
                           <input type="submit" value="Order" />

                           <!-- Functional Reset button -->
                           <input type="reset" value="Reset" />
           </form>
<div id="footer" class="CR" align="center">
            &copy; All rights reserved. The Coffee Shop.
        </div>

上面的循环是你们中的一些人建议的，但不起作用。我不知道为什么，但是是的。它在新页面中有效，但在当前页面中无效。可能是因为我到处都有打印品，但这就是我们被告知编写网页的方式。

最佳答案

您可以尝试以下方法之一:

使用原始格式:

var info = new Array(5);
var drinkInfo = new Array(5);
drinkInfo[0] = "Plain black coffee brewed from our finest of roasted coffee beans.";
drinkInfo[1] = "Chocolate mocha flavored, covered in chocolate chips and topped with whipped cream.";
drinkInfo[2] = "Vanilla flavored iced drink, topped with whipped cream and caramel. (No coffee added)";
drinkInfo[3] = "Pumpkin flavored latte, with espresso and milk mixed together for a delicious beverage.";
drinkInfo[4] = "Steamed milk with vanilla-flavored syrup is marked with espresso and topped with caramel drizzle.";

// get all <b> tags
var coffees = document.getElementsByTagName("b");

// loop through all drinkInfos and append the info to the corresponding <b> element
for (var i = 0; i < drinkInfo.length; i++) {
  coffees[i].innerHTML += " " + drinkInfo[i];
}
<strong>Enter quantity for your choice of drink:</strong> <br /><br />

<input type="text" name="quant1" style="width: 25px;" /> <b>Black Coffee:</b> <br />
<input type="text" name="quant2" style="width: 25px;" /> <b>Loco Mocha:</b>  <br />
<input type="text" name="quant3" style="width: 25px;" /> <b>Vanilla Bean Frappuccino:</b>  <br />
<input type="text" name="quant4" style="width: 25px;" /> <b>Pumpkin Spice Latte:</b>  <br />
<input type="text" name="quant5" style="width: 25px;" /> <b>Caramel Macchiato:</b>  <br />

使用表格进行更好的设计:

var coffees = [
    "Black Coffee",
    "Loco Mocha",
    "Vanilla Bean Frappuccino",
    "Pumpkin Spice Latte",
    "Caramel Macchiato",
];

var info = [
    "Plain black coffee brewed from our finest of roasted coffee beans.",
    "Chocolate mocha flavored, covered in chocolate chips and topped with whipped cream.",
    "Vanilla flavored iced drink, topped with whipped cream and caramel. (No coffee added)",
    "Pumpkin flavored latte, with espresso and milk mixed together for a delicious beverage.",
    "Steamed milk with vanilla-flavored syrup is marked with espresso and topped with caramel drizzle.",
];

var table = document.createElement("table");

for (var i = 0; i < coffees.length; i++) {
    // create a row for each coffee
    var row = document.createElement("tr");
    // first cell contains the input element
    var cell1 = document.createElement("td");
    cell1.innerHTML = '<input type="text" name="quant' + (i+1) + '" style="width: 25px" />';
    // second cell contains the coffee name
    var cell2 = document.createElement("td");
    cell2.innerHTML = "<b>" + coffees[i] + ":</b>";
    // third cell contains the coffee description
    var cell3 = document.createElement("td");
    cell3.innerHTML = info[i];
    // appending all cells to current row
    row.appendChild(cell1);
    row.appendChild(cell2);
    row.appendChild(cell3);
    // appending the row to the table
    table.appendChild(row);
}
// and finally, appending the table to the body
document.body.appendChild(table);
<strong>Enter quantity for your choice of drink:</strong> <br /><br />

此外，您可以为每种咖啡创建一个对象并添加名称和信息属性:jsFiddle

如果您要将脚本放在头部，您可以使用 window.onload 包装您的代码:

window.onload = function() {
    // ...
    var table = document.createElement("table");

    for (var i = 0; i < coffees.length; i++) {
        // create a row for each coffee
        var row = document.createElement("tr");
        // first cell contains the input element
        var cell1 = document.createElement("td");
        cell1.innerHTML = '<input type="text" name="quant' + (i+1) + '" style="width: 25px" />';
        // second cell contains the coffee name
        var cell2 = document.createElement("td");
        cell2.innerHTML = "<b>" + coffees[i] + ":</b>";
        // third cell contains the coffee description
        var cell3 = document.createElement("td");
        cell3.innerHTML = info[i];
        // appending all cells to current row
        row.appendChild(cell1);
        row.appendChild(cell2);
        row.appendChild(cell3);
        // appending the row to the table
        table.appendChild(row);
    }
    // and finally, appending the table to the body
    document.body.appendChild(table);
};

关于javascript - 如何使用数组显示循环中的文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33290758/

25 4 0
文章推荐： javascript - 无法通过 JavaScript 模拟点击提交按钮
文章推荐： javascript - 使用 Handsontable-in-handsontable，如何仅从一列返回值？
文章推荐： ios - 制作仅在特定日期重复的本地通知
文章推荐： ios - App Delegate - 页面 Controller 错误
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com