时间戳

首页 > 解决方案 > 我需要从数组中删除一个对象并根据条件显示一条消息

javascript - 我需要从数组中删除一个对象并根据条件显示一条消息

问题描述

我需要一个用户在数组中输入 2 个对象。如果在航班号上发现重复条目​​，则应发出警报。问题是，警报会阻止用户输入某个输入，但即使在警报之后，它仍然会将两个输入都添加到数组中，从而导致总里程数错误。副本没有出现在表格中，这很好。

在提交另一个按钮后，应该显示用户的级别，但它什么也不显示。我不知道是不是因为第一个问题。

我尝试使用 pop() 和 splice() 并产生了更多错误。

var total = 0;

const flightTable = document.getElementById('flightTable'),
    button = document.getElementById('display'),
    flightNum = document.getElementById('flightNumber'),
    milesFlown = document.getElementById('milesFlown'),
    addRow = () => {
        const tr = document.createElement('tr'),
            tdFlightNo = document.createElement('td'),
            tdMilesFlown = document.createElement('td');

        tdMilesFlown.setAttribute('class', 'needsToBeCounted');

        /** getting the last record in the flight objects array **/
        tdFlightNo.textContent = flightArray[i - 1].flightNumber;
        tdMilesFlown.textContent = flightArray[i - 1].milesFlown;

        /** append the TDs elements to the TR element (all of them are created above dynamically) **/
        tr.append(tdFlightNo, tdMilesFlown);

        /** append that row to the HTML table **/
        flightTable.appendChild(tr);
    }

let flightArray = [],
    flightNumValue = null,
    milesFlownValue = null,
    i = 0;

button.addEventListener('click', () => {
    flightNumValue = flightNum.value;
    milesFlownValue = milesFlown.value;

    /** checking for duplicate entry **/
    if (flightArray.find(el => {
            return el.flightNumber === flightNumValue
        })) {

        alert('You cannot enter this flight due to Duplicate Flight Number entry: "' + flightNumValue + '"');
        
        return false;
    }
    
    /** add the entry in the flight objects table **/
    flightArray[i++] = {
        flightNumber: flightNumValue,
        milesFlown: milesFlownValue
    }; /** add the flight record to the array and increment the counter i (notice the i++) **/   
    addRow(); /** call addRow to add a new row in the table (HTML) **/
});

function getClassStatus() {
    var cls = document.getElementById("flightTable").getElementsByTagName("td");
    for (var i = 0; i < cls.length; i++) {
        if (cls[i].className == "needsToBeCounted") {
            total += isNaN(cls[i].innerHTML) ? 0 : parseInt(cls[i].innerHTML);
        }
        console.log(total);
        //document.getElementById("classMessages").innerHTML = total +" miles";
        document.getElementById("classMessages").innerHTML = "is the total amount of miles you have flown";
        document.getElementById("totalNoOfMiles").value = Number(total);
        console.log(total);

        displayMessage();
    }

    function displayMessage() {
        var totalValue = document.getElementsByName('totalNoOfMiles');

        var bMessageTag = document.getElementById("bMessage");
        var sMessageTag = document.getElementById("gMessage")
        var gMessageTag = document.getElementById("sMessage");
        if (totalValue < 10000) {
            bMessageTag.innerHTML = "You are a Bronze member."
            document.getElementById('sMessage').innerHTML = "";
            document.getElementById('gMessage').innerHTML = "";
            console.log(bMessageTag);
        }
        if (totalValue >= 10000 && total <= 24999) {
            sMessageTag.innerHTML = "You are a Silver member."
            document.getElementById('gMessage').innerHTML = "";
            document.getElementById('sMessage').innerHTML = "";

        }
        if (totalValue > 25000) {
            gMessageTag.innerHTML = "You are a Gold member."
            document.getElementById('sMessage').innerHTML = "";
            document.getElementById('bMessage').innerHTML = "";
        }
    }
}
<form name="attention">
    <label>Please enter your flight Number:</label><br>
    <input type="text" id="flightNumber" name="flightnumber" value="" /> 
    <br />
    <label>Please enter Miles Flown:</label><br>
    <input type="text" id="milesFlown" name="milesflown" value="" />
    <br>
    <input type="button" id="display" name="display" value="Submit Flight Information" />
    <br>
    <input type="button" id="status" name="status" value="Get Class Level" onclick=getClassStatus(); />
    <br>
    <input type="number" id="totalNoOfMiles" name="totalNoOfMiles" value="" />

    <div id="classMessages"></div>
    <h3>Your Passenger Class Level is:</h3>
    <div id="bMessage"></div>
    <div id="sMessage"></div>
    <div id="gMessage"></div>

    <table id="flightTable">
        <tr>
            <th>Flight Number</th>
            <th>Number of Miles</th>
        </tr>
    </table>
</form>

当用户输入两个输入时，输入应在单击按钮提交信息后显示在表格中。为了让用户获得其“级别”，他们应该单击另一个按钮。他们的水平显示基于他们的输入之一（英里）的总和。级别应根据其级别动态更改。不接受航班 # 上的重复条目。

标签： javascripthtmlarrays

解决方案

您的总累加器始终附加到总数中，因此总里程数将永远增长。

您的消息未显示，因为从type="text"输入存储的值将始终是一个字符串，稍后您将字符串与数字进行比较。字符串逐个字符进行比较，直到它们不相等或没有任何字符可供比较。您需要的是数字比较，因此number < number是您的逻辑更准确的表达式。

让我们开始吧...

当用户添加航班信息时，我们可以获得两个航班号。和英里。我们希望将英里数保存为数值，如下所示：

milesFlownValue = Number(milesFlown.value);

flightArray您可以将每个对象推送到... ，而不是声明迭代器

flightArray.push({
  flightNumber: flightNumValue,
  milesFlown: milesFlownValue
});

然后，您可以使用此数组的大小来 a) 检查数组是否有任何元素要在其上执行逻辑 b) 如果是这样，您可以使用Array.prototype.some非常适合条件语句执行测试。请注意下面的条件toLowerCase()至关重要，因为您希望航班号A123和 和a123一样。

if (flightArray.length &&
    flightArray.some(entry => entry.flightNumber.toLowerCase() === flightNumValue.toLowerCase()) ) {
  ...
}

现在，当您添加新行时，不需要pop()或slice()不需要，因为您不想更改原始数组的状态。您可以简单地以传统方式获得最后一项......

lastItem = flightArray[flightArray.length - 1]

其余的很简单，但我改进了一些代码，希望你能从中受益。

const flightTable = document.getElementById('flightTable'),
      button = document.getElementById('display'),
      flightNum = document.getElementById('flightNumber'),
      milesFlown = document.getElementById('milesFlown'),
      status = document.getElementById('status'),
      classLevel = document.getElementById("classLevel");

const addRow = () => {
  const tr = document.createElement('tr'),
        tdFlightNo = document.createElement('td'),
        tdMilesFlown = document.createElement('td'),
        lastItem = flightArray[flightArray.length - 1];

  tdFlightNo.textContent = lastItem.flightNumber;
  tdMilesFlown.textContent = lastItem.milesFlown;
  tr.append(tdFlightNo, tdMilesFlown);

  flightTable.appendChild(tr);
}

let flightArray = [],
    flightNumValue = null,
    milesFlownValue = null,
    total = 0;

button.addEventListener('click', () => {
  flightNumValue = flightNum.value;
  milesFlownValue = Number(milesFlown.value);

  if (flightArray.length && flightArray.some(entry => entry.flightNumber.toLowerCase() === flightNumValue.toLowerCase())) {
    alert('You cannot enter this flight due to Duplicate Flight Number entry: "' + flightNumValue + '"');
    return false;
  }

  flightArray.push({
    flightNumber: flightNumValue,
    milesFlown: milesFlownValue
  });

  addRow();
});


status.addEventListener('click', () => {
  total = flightArray.reduce((a, b) => a + b.milesFlown, 0)
  document.getElementById("classMessages").innerHTML = `${total} is the total amount of miles you have flown`;
  displayMessage();
})

function displayMessage() {
  let output = "";

  if (total > 0 && total < 10000) {
    output = "You are a Bronze member.";
  }
  else if (total >= 10000 && total <= 24999) {
    output = "You are a Silver member.";
  }
  else if (total > 25000) {
    output = "You are a Gold member.";
  }
  classLevel.textContent = output;
}
<form name="attention">
  <label>Please enter your flight Number:</label>
  <br />
  <input type="text" id="flightNumber" name="flightnumber" value="" /> 
  <br />
  <label>Please enter Miles Flown:</label>
  <br />
  <input type="text" id="milesFlown" name="milesflown" value="" />
  <br />
  <input type="button" id="display" name="display" value="Submit Flight Information" />
  <br />
  <input type="button" id="status" name="status" value="Get Class Level" />
  <br />
  <br />
  <div id="classMessages"></div>
  <div id="classLevel"></div>
  <br />
  <table id="flightTable">
    <tr>
      <th>Flight Number</th>
      <th>Number of Miles</th>
    </tr>
  </table>
</form>

推荐阅读