提醒停止重复数据答案

【问题标题】：Alert to stop duplicate data提醒停止重复数据
【发布时间】：2018-07-11 06:23:13
【问题描述】：

我正在尝试添加警报以通知用户已输入数据。我只想将此应用于航班号。这样当用户输入已经输入的航班号并将其保存到数组中时，它会弹出一条消息，告诉他们它已经发布。

<html>
    <head>
    <title>Member Info</title>
    <style> 
    table, th, td {
    border: 1px solid black;
    text-align: center;
    border-collapse: collapse;
    }
    </style>
   <script type="text/javascript">
var FlightNumber=new Array();
var Miles=new Array();

function insert(){
    var FlightNumberValue = document.getElementById('FlightNumber').value;
    var MilesValue = document.getElementById('Miles').value;
    FlightNumber[FlightNumber.length]=FlightNumberValue;
    Miles[Miles.length]=MilesValue;
  }

function showFlightNumber() {
  var content="<b></b><br>";
  for(var i = 0; i < FlightNumber.length; i++) {
     content +=FlightNumber[i]+"<br>";
  }
   document.getElementById('display').innerHTML = content;
}

function showMiles() {
  var content="<b></b><br>";
  for(var i = 0; i < Miles.length; i++) {
     content +=Miles[i]+"<br>";
  }
  document.getElementById('display2').innerHTML = content;
  // new code
  var total=0;
  for(var i = 0; i < Miles.length; i++) {
     total += Number.parseInt(Miles[i]);
  }
  document.getElementById('total-miles').innerHTML = total;
}

      

</script>
    </head>
        <body>

        <form id="form">

            <h1>Find out what Flight Class Member you are!</h1>
            <p>To use, please input the flight number and number of miles. Press save and then show. To enter more than one press "Enter More" button and repeat steps.<p>
        
        <br>

            <label for="FlightNumber">Flight Number</label> <input id="FlightNumber" type="text" /> 
        <br>

            <label for="Miles">Miles</label><input id="Miles" type="text" />
        <br>

        <br>

            <input type="button" value="Save" onclick="insert();">
            <input type="button" value="Show flight number" onclick="showFlightNumber();"> 
            <input type="button" value="Show miles" onclick="showMiles();">
            <input type= "reset" value="Enter More" />
        <hr>
        </form>

        <table style="width:100%">
                <tr>
                  <th>Flight Number</th>
                  <th>Miles</th> 
                </tr>
                <tr>
                  <td><div id="display">
                    </div></td>
                  <td><div id="display2">
                    </div></td> 
                </tr>
                    <td>Total Miles:</td>
                    <td id="total-miles"></td>
              </table>
              <br><br>
              <table id="MemberTable" style="width:100%", border="1px solid black">
                    <tr>
                      <td>Bronze Member</td>
                      <td><10000 miles flown</td> 
                    </tr>
                    <tr>
                      <td>Silver Member</td>
                      <td><25000 miles flown</td> 
                    </tr>
                    <tr>
                      <td>Gold Member</td>
                      <td>>25000 miles flown</td> 
                    </tr>
                  </table>  
        </body>

</html>

我还试图突出显示成员表，以根据总里程显示他们所在的组。我希望突出显示的颜色与会员级别相匹配。有点像这样：

  <style>
      .bronze {
        background: rgb(80.4, 49.8, 19.6);
      }
      .silver {
        background: silver   
      }
      .gold {
        background: gold   
      }
    </style>
    
    <script>

 function highlightWeightClass(total-miles) {
        var rows = document.getElementById("MemberTable").rows;
        rows[0].className = total-miles< 10000 ? "bronze" : "";
        rows[1].className = total-miles >= 10000 && total-miles < 25000 ? "silver" : "";
        rows[2].className = total-miles >= 25000 ? "gold" : "";
        
       </script>

【问题讨论】：

您的第二个示例不起作用。你能不能再提炼一下？这里有很多东西需要筛选，感觉就像我们正在构建你项目的其余部分。什么构成重复数据？你试过什么？

标签： javascript html arrays alert

【解决方案1】：

要检查数组是否包含对象，请使用：

Array.prototype.contains = function(obj) {
   var i = this.length;
  while (i--) {
       if (this[i] == obj) {
          return true;
       }
    }
   return false;
}

为了突出显示成员表：为document.getElementById("Miles") 的keyup 添加一个事件侦听器，然后执行您的函数。

<html>
    <head>
    <title>Member Info</title>
    <style> 
    table, th, td {
    border: 1px solid black;
    text-align: center;
    border-collapse: collapse;
    }
      .bronze {
        background: rgb(80.4, 49.8, 19.6);
      }
      .silver {
        background: silver   
      }
      .gold {
        background: gold   
      }
    </style>
    
    <script>
    Array.prototype.contains = function(obj) {//function to check if an Array contains an object
    var i = this.length;
     while (i--) {
    if (this[i] == obj) {
        return true;
    }
   }
   return false;
   }
 function highlightWeightClass(totalmiles) {
        var rows = document.getElementById("MemberTable").rows;
        rows[0].className = totalmiles< 10000 ? "bronze" : "";
        rows[1].className = totalmiles >= 10000 && totalmiles < 25000 ? "silver" : "";
        rows[2].className = totalmiles >= 25000 ? "gold" : "";
}
        
       </script>
   <script type="text/javascript">
var FlightNumber=new Array();
var Miles=new Array();
function insert(){
    var FlightNumberValue = document.getElementById('FlightNumber').value;
    if(!FlightNumber.contains(FlightNumberValue)){
    var MilesValue = document.getElementById('Miles').value;
    FlightNumber[FlightNumber.length]=FlightNumberValue;
    Miles[Miles.length]=MilesValue;
    } else {
     alert("You have already entered this flight number.");
    }
  }

function showFlightNumber() {
  var content="<b></b><br>";
  for(var i = 0; i < FlightNumber.length; i++) {
     content +=FlightNumber[i]+"<br>";
  }
   document.getElementById('display').innerHTML = content;
}

function showMiles() {
  var content="<b></b><br>";
  for(var i = 0; i < Miles.length; i++) {
     content +=Miles[i]+"<br>";
  }
  document.getElementById('display2').innerHTML = content;
  // new code
  var total=0;
  for(var i = 0; i < Miles.length; i++) {
     total += Number.parseInt(Miles[i]);
  }
  document.getElementById('total-miles').innerHTML = total;
}

      
window.onload = function(){
  document.getElementById("Miles").addEventListener("keyup", function(event){
  highlightWeightClass(document.getElementById("Miles").value);
  });
}
</script>
    </head>
        <body>

        <form id="form">

            <h1>Find out what Flight Class Member you are!</h1>
            <p>To use, please input the flight number and number of miles. Press save and then show. To enter more than one press "Enter More" button and repeat steps.<p>
        
        <br>

            <label for="FlightNumber">Flight Number</label> <input id="FlightNumber" type="text" /> 
        <br>

            <label for="Miles">Miles</label><input id="Miles" type="text" />
        <br>

        <br>

            <input type="button" value="Save" onclick="insert();">
            <input type="button" value="Show flight number" onclick="showFlightNumber();"> 
            <input type="button" value="Show miles" onclick="showMiles();">
            <input type= "reset" value="Enter More" />
        <hr>
        </form>

        <table style="width:100%">
                <tr>
                  <th>Flight Number</th>
                  <th>Miles</th> 
                </tr>
                <tr>
                  <td><div id="display">
                    </div></td>
                  <td><div id="display2">
                    </div></td> 
                </tr>
                    <td>Total Miles:</td>
                    <td id="total-miles"></td>
              </table>
              <br><br>
              <table id="MemberTable" style="width:100%", border="1px solid black">
                    <tr>
                      <td>Bronze Member</td>
                      <td><10000 miles flown</td> 
                    </tr>
                    <tr>
                      <td>Silver Member</td>
                      <td><25000 miles flown</td> 
                    </tr>
                    <tr>
                      <td>Gold Member</td>
                      <td>>25000 miles flown</td> 
                    </tr>
                  </table>  
        </body>

</html>

【讨论】：