Question

我正在开发一个JavaScript短程序（蹦床招聘），该程序的目的是根据当前在蹦床上的每个客户的名称以及他们是成人还是孩子（状态类型）进行记录。

目前我有addcustomer，displayallcustomer和deletelastcustomer个函数，但我不确定我对displayCustomerType(statusType)函数做错了什么。此功能适用于当我按仅显示儿童客户或仅显示成人客户时，它将仅显示数组列表中的子项或成人。

Fiddle

上的演示

<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

更改了整个代码，现在可以正常运行。

Fiddle

上的演示

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-函数显示用户输入数组

Fiddle

3 个答案:

Fiddle

HTML：

的JavaScript：