个人中心
gpt4 book ai didi

Javascript-显示用户输入数组的函数

转载 作者：行者123 更新时间：2023-12-02 16:49:19 24 4
gpt4 key购买 nike

我正在开发一个JavaScript短程序(蹦床租赁)，该程序的目的是根据当前在蹦床上的每个客户的姓名以及他们是成人还是 child (状态类型)进行记录。

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

演示 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>

最佳答案

更改了整个代码，现在它可以工作了。

演示 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;
};

关于Javascript-显示用户输入数组的函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26812435/

24 4 0
文章推荐： javascript - 为什么测试框架的语法如此奇怪？
文章推荐： winforms - 通过WebBrowser控件下载文件
文章推荐： Odoo 10 - 如何隐藏 One2many 字段
文章推荐： javascript - 拉出某些嵌套对象
行者123
个人简介

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

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