Javascript函数显示用户输入数组

Question

我正在开发JavaScript简短程序（雇用蹦床），该程序的目的是根据当前在蹦床上的每个客户的姓名以及他们是成人还是儿童（状态类型）进行记录。

当前，我有addcustomer ， displayallcustomer和deletelastcustomer函数，但是我不确定displayCustomerType(statusType)函数做错了什么。 当我按“仅显示儿童客户”或“仅显示成人客户”时 ，此功能仅在阵列列表中显示儿童或成人。

小提琴演示

 <html> <head> <meta charset="utf-8" /> <title>work 2</title> <script type="text/javascript"> //maximum customer on the trampoline is 5 const MAX_CUSTOMERS = 5; //create new Array var customerList = new Array(); //add customer function addCustomer() { //check max customers if (customerList.length >= MAX_CUSTOMERS) { alert('Sorry, no more than ' + String(MAX_CUSTOMERS) + ' customers are allowed on the trampoline.'); } else { //add new user var newIndex = customerList.length; customerList[newIndex] = new Object; //ask user enter their name customerList[newIndex].name = prompt('What is the customer\\'s name?'); //ask user enter their status customerList[newIndex].status = prompt('Are you a Child or an Adult?'); //check user is child or adult while (!(customerList[newIndex].status == 'child' || customerList[newIndex].status == 'adult')) { customerList[newIndex].status = ( prompt('Error Please Enter \\'child\\' or \\'adult\\':')); } } } //display customers function displayAllCustomers() { //create message var message = ''; //loop customers for (var i = 0; i < customerList.length; i++) { //add customer to message message += customerList[i].name + ', Status: ' + String(customerList[i].status) + '. \\n'; } //check message if (message == '') { message = 'There are no customer to display!'; } //output message alert(message); } //delete last customer function deleteLastCustomer() { //check customer list if (customerList.length > 0) { //delete last customer customerList.length--; alert('The last customer has been deleted.'); } else { alert('There are no customer to delete!'); } } function displayCustomerType(statusType) { var message = ''; for (var i = 0; i < customerList.length; i++) { //loop through customerlist message += customerList[i].status + '. '; } if ((customerList[i].status = 'child') || (customerList[i].status = 'adult')) { alert(message); } } </script> </head> <body> <div> <button type="button" onclick="addCustomer();">Add Customer</button> <br> <button type="button" onclick="displayAllCustomers();">Display All Customers</button> <br> <button type="button" onclick="deleteLastCustomer();">Delete Last Customer</button> <br> <button type="button" onclick="displayCustomerType('child');">Display Only Child Customers</button> <br> <button type="button" onclick="displayCustomerType('adult');">Display Only Adult Customers</button> <br> </div> </body> </html>

Answer 1

这里有两点。

您应该使用好的函数名称。
您必须了解您希望代码执行的操作。

1.使用好的函数名称。

您的函数名为displayCustomerType() 。 它接受一个论点。 如果我猜想displayCustomerType(arg)函数的作用是，我假设它显示了作为参数提供的客户对象的类型。 因此，如果我向其提供“子”类型的客户，则可能希望它显示“子”类型。

如果我是正确的话，那不是您想要发生的事情。 您的按钮名为“显示所有子客户”。 因此，我假设您希望为该功能提供一个客户类型，然后显示具有该类型的客户列表中的所有客户。

解决这个问题很简单。 使用好的函数名称。 displayCustomersOfType(arg)可以。 使用这样的函数名称可以使使用代码的人更清楚地知道您的代码以某种方式起作用。

2.了解您想要代码做什么。

也许您认为您知道自己想要代码做什么。 你有它的头。 您在评论中问：“为什么显示'孩子，孩子，孩子'？” 我告诉你为什么。 它之所以显示是因为您告诉它要显示的内容。 让我们分解一下displayCustomersOfType(arg)函数应该做什么。

接受一个论点。
使用参数过滤显示的客户数量。
显示所有通过过滤器的客户。

然后，我们可以开始考虑如何在代码中工作。 我们有一系列客户对象。 每个人都有一个状态和一个名字。 您要调用此函数，为它提供一个客户类型参数，使用该参数过滤客户列表，并显示通过过滤器的客户。 让我们开始弄清楚该如何编码。

创建一个函数 displayCustomersOfType(arg)
对于客户列表中的每个客户，
如果客户的类型等于指定的类型，
将该客户的名称附加到输出中。
显示输出。

这些都是过程中的逻辑步骤。 对于软件开发人员来说，能够像第一组步骤那样解释抽象需求并像第二组步骤一样在逻辑步骤方面理解它们是绝对重要的技能。 我怀疑您想成为软件开发人员，因为您有软件开发作业。 如果我是正确的，那么您需要发展这项技能。

让我们看一个例子。

我有水果。 有两个苹果，一个香蕉和两个樱桃。 我想编写一个仅显示具有特定名称的水果的函数。 对于水果列表中的每个水果，如果它具有我指定的名称，则将其添加到消息中。 然后，我将显示具有该名称的水果列表。

JSFiddle： http : //jsfiddle.net/kLur4qc5/

var fruits = ['apple', 'apple', 'banana', 'cherry', 'cherry'],
    showFruitsWithName = function (name) {
        var message = "";
        fruits.forEach(function (fruit) {
            if (fruit === name) {
                message += name + " ";
            }
        });
        alert(message);
    };

showFruitsWithName('cherry');

这里有一个答案。 它写在五个步骤列表中。 我什至为您加粗了一些关键字。 我相信您可以理解示例代码并将其应用于您的目的。 您可以找出答案。

问问题。 我会回答他们，但尝试使他们有特定的问题。 不要问“我该怎么做？请提供可复制和粘贴的完整代码示例”。 我知道这样做是很诱人的，特别是因为这样您很快就能得到答案，但是如果您不真正了解这些内容，只会伤害自己。

Answer 2

更改了整个代码，现在可以使用了。

小提琴演示

HTML：

<body>
    <div>
        <label>Name: </label><input type="text" id="name" />
        <br />
        <label>Adult/Child: </label><input type="text" id="status" />
        <br />
        <br />
        <button>Add Customer</button>
        <br />
        <button>Display All Customers</button>
        <br />
        <button>Delete Last Customer</button>
        <br />
        <button id="Child">Display Only Child Customers</button>
        <br />
        <button id="Adult">Display Only Adult Customers</button>
        <br />
    </div>
    <br />
    <br />
    <div id="message"></div>
</body>

JavaScript：

var buttons = document.getElementsByTagName('button');
var m = document.getElementById('message');
var maxCustomers = 5;
var customerList = [];

buttons[0].onclick = function addCustomer() {
    if (customerList.length >= maxCustomers) {
        m.innerHTML = 'Sorry, no more than ' + maxCustomers + ' customers are allowed on the trampoline.';
    } else {
        var n = document.getElementById('name').value;
        var s = document.getElementById('status').value.toLowerCase();
        if (!n && !s) m.innerHTML = 'Please fill the input boxes first!';
        customerList.push({
            name: n,
            status: s.slice(0, 1).replace(s.slice(0, 1), s.slice(0, 1).toUpperCase()) + s.slice(1, s.length)
        });
        m.innerHTML = n + ' has been added to the List.'
    }
};

buttons[1].onclick = function displayAllCustomers() {
    var message = '';
    for (var i = 0; i < customerList.length; i++) {
        message += 'Name: ' + customerList[i].name + ', Adult/Child: ' + customerList[i].status + '. <br />';
    }
    if (message === '') {
        message = 'There are no customer to display!';
    }
    m.innerHTML = message;
};

buttons[2].onclick = function deleteLastCustomer() {
    if (customerList.length > 0) {
        customerList.length--;
        m.innerHTML = 'The last customer has been deleted.';
    } else {
        m.innerHTML = 'There are no customer to delete!';
    }
};

buttons[3].onclick = buttons[4].onclick = function displayCustomerType() {
    var message = '';
    for (var i = 0; i < customerList.length; i++) {
        if (customerList[i].status == this.id) {
            message += 'Name: ' + customerList[i].name + ', Adult/Child: ' + customerList[i].status + '. <br />';
        }
    }
    if (message === '') {
        message += 'None Found!';
    }
    m.innerHTML = message;
};

Answer 3

大括号有点超出范围。 应该更像是：

var message = '';
for (var i = 0; i < customerList.length; i++) {
    if (customerList[i].status === statusType) message += customerList[i].status + '. ' ;
}
alert(message);

Javascript函数显示用户输入数组

问题描述

小提琴演示

3 个解决方案

解决方案1
1 2014-11-08 01:55:41

解决方案2
1 已采纳 2014-11-08 02:17:40

小提琴演示

HTML：

JavaScript：

解决方案3
0 2014-11-08 00:48:13

Javascript函数显示用户输入数组

问题描述

小提琴演示

3 个解决方案

解决方案1 1 2014-11-08 01:55:41

解决方案2 1 已采纳 2014-11-08 02:17:40

小提琴演示

HTML：

JavaScript：

解决方案3 0 2014-11-08 00:48:13

解决方案1
1 2014-11-08 01:55:41

解决方案2
1 已采纳 2014-11-08 02:17:40

解决方案3
0 2014-11-08 00:48:13