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