你有人过来，菜单上有披萨。问题是，每个人只喜欢某些浇头。越多人过来，你需要的披萨就越多。为了帮助你弄清楚你应该订购多少披萨，以及要获得什么配料，你将创建一个JavaScript程序。
您的HTML页面应列出以下人员，他们吃了多少片，以及他们的顶部偏好。
//在
中硬编码的Pizza偏好设置该计划应该询问谁将会过来。在输入所有客人之后，该计划将宣布您需要多少片披萨，以及您可以为这一特定人群选择哪些配料。无论将哪些人添加到访客列表，此信息都应准确无误。如果过来的人不能同意任何配料，该计划应该指出你只需要获得普通的披萨。
//Dinner plans assignment
var nameSliceTop = [];
var totalSlice = 0;
var aceptableTopping = ["pepperoni", "bacon", "ham", "pineapple", "onion", "peppers", "extra cheese", "sausage", "olives"
, "mushroom", "plain"]
nameSliceTop[0] = ["jane", 2, "mushroom", "onion", "peppers", "olives"];
nameSliceTop[1] = ["lisa", 3, "pepperoni", "ham", "pineapple"];
nameSliceTop[2] = ["taylor", 3, "extra cheese", "pepperoni", "sausage", "bacon"];
nameSliceTop[3] = ["chris", 2, "mushroom", "sausage", "bacon", "ham", "onion", "peppers"];
nameSliceTop[4] = ["alyssa", 1, "pepperoni", "bacon"];
nameSliceTop[5] = ["will", 2, "extra cheese", "sausage", "bacon", "onion", "peppers", "olives"];
nameSliceTop[6] = ["jessica", 2, "pepperoni", "bacon", "ham", "pineapple", "onion", "peppers"];
function outputPizza() {
for (i = 0; i < 7; i++) {
if (document.getElementById(nameSliceTop[i][0]).checked === true) {
totalSlice += nameSliceTop[i][1];
}
}
document.getElementById("dinnerPlansTwo").innerHTML += "You will need " + totalSlice + " slices for your guests." + "<br/>";
totalSlice = 0;
for (i = 0; i < 7; i++) {
if (document.getElementById(nameSliceTop[i][0]).checked === true) {
for(x = 2; x < nameSliceTop.length; x++) {
for (y = 0; y < aceptableTopping.length; y++) {
if (aceptableTopping[y].indexOf(nameSliceTop[i][x]) == -1) {
aceptableToping.splice(y, 1);
}
}
}
}
}
document.getElementById("dinnerPlansTwo").innerHTML += "Your agreeable options include:";
for (z = 0; z < aceptableTopping.length; z++) {
document.getElementById("dinnerPlansTwo").innerHTML += " " + aceptableTopping[z] + " ";
}
}
<!-- Dinner Plans assighment -->
<p id="dinnerPlans"> Dinnner Plans Assighment: </p>
<table>
<thead>
<tr>
<th>Check if attending</th>
<th>Name</th>
<th>Slices</th>
<th>Aceptable Toppings</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" id="jane"></td>
<td>Jane</td>
<td>2</td>
<td>mushroom, onion, peppers, olives</td>
</tr>
<tr>
<td><input type="checkbox" id="lisa"></td>
<td>Lisa</td>
<td>3</td>
<td>pepperoni, ham, pineapple</td>
</tr>
<tr>
<td><input type="checkbox" id="taylor"></td>
<td>Taylor</td>
<td>3</td>
<td>extra cheese, pepperoni, sausage, bacon</td>
</tr>
<tr>
<td><input type="checkbox" id="chris"></td>
<td>Chris</td>
<td>2</td>
<td>mushroom, sausage, bacon, ham, onion, peppers</td>
</tr>
<tr>
<td><input type="checkbox" id="alyssa"></td>
<td>Alyssa</td>
<td>1</td>
<td>pepperoni, bacon</td>
</tr>
<tr>
<td><input type="checkbox" id="will"></td>
<td>Will</td>
<td>2</td>
<td>extra cheese, sausage, bacon, onion, peppers, olives</td>
</tr>
<tr>
<td><input type="checkbox" id="jessica"></td>
<td>Jessica</td>
<td>2</td>
<td>pepperoni, bacon, ham, pineapple, onion, peppers</td>
</tr>
</tbody>
</table>
<button onclick="outputPizza()">Submit selected textboxes</button>
<p id="dinnerPlansTwo"><br/></p>
答案 0 :(得分：0)
更好的方法可能是将可能的参与者定义为对象，而不是数组：
var people = [{
name: "jane",
slices: 2,
toppings: ["mushroom", "onion", "peppers", "olives"]
}, {
...
}];
然后，当您迭代选定的人时，您可以添加切片。在遍历每个人之后，您必须deduplicate the array，但这是一种更简洁的方法，每按一次按钮只需要完成一次。
此外，您只需要迭代 people数组一次：每次迭代，如果选择了此人，则将切片添加到totalSlices变量，并将人物添加到acceptableToppings变量中。将首选项添加到// Loop through all possible toppings
for (i = 0; i < aceptableTopping.length; i++) {
// Loop through all people
for (j = 0; j < people.length; j++) {
// If any person's topping preferences do NOT include the topping in question, "pop" (remove) it
if (people[j]["toppings"].indexOf(aceptableTopping[i]) < 0) {
aceptableTopping.pop(aceptableTopping[i]);
continue;
}
}
}
数组变量。
如果＆＃34;可接受的配料＆＃34;意味着每个人更喜欢顶部，而不仅仅是任何人，然后我会像上面一样使用嵌套for循环：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<link rel="stylesheet" href="main.css">
<title>testing</title>
</head>
<body id="body">
<form>
<input type="bottom" class="btn" id="Cgreen" value="click here for green" onclick="changeColor()">
<input type="bottom" class="btn" id="Cblue" value="click here for blue" onclick="changeColor()">
</form>
<script>
var colorg = document.getElementById("Cgreen").value;
var colorb = document.getElementById("Cblue").value;
function changeColor() {
console.log (colorb + colorg);
if (colorb === "click here for blue") {
document.getElementById("Cblue").style = "blue";
} else if ( colorg === "click here for green") {
document.getElementById("Cgreen").style = "green";
}
}
</script>
</body>
</html>
答案 1 :(得分：0)
您的代码中存在多个问题。让我列出来，但在此之前，
以下是我fiddle: jsfiddle.net/6f0ctoco
的链接原始代码的问题：
在jsfiddle，我得到“outputPizza未定义错误”。这可能不是
你的情况，但我必须通过将功能设置为全局窗口来克服它
对象，window.outputPizza = function outputPizza() { //...
您在最后一个for循环中输入了acceptableTopping的拼写错误。拼写没有
匹配脚本的其余部分。
您使用的是acceptableTopping.splice()。 Splice将从中删除项目
acceptableTopping数组。相反，您希望存储可接受的浇头
在一个新的数组中。我将它们存储在currentAcceptableToppings中。
因为您没有正确跟踪或检查可接受的配料，
outputPizza函数
preferences 我只使用document.getElementById("dinnerPlansTwo").innerHTML一次来简化输出打印
提示：我使用了Array.forEach，因为语法比具有太多for循环更好阅读。