Question

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

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

Answer 1

要检查数组是否包含在对象上，请使用以下方法：

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

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

keyup

提醒停止重复数据

1 个答案: