Question

我正在创建一个程序，该程序会将文本框中的值存储到数组中，并以表格格式显示它们，以将总里程数相加。然后，总里程将以里程颜色突出显示里程表。我仍然必须添加代码以突出显示里程。但是我很难让我的数组显示我的值并将它们显示在单独的表中。

<!DOCTYPE html>
<html>
  <head>
    <title>Flight Class Member</title>
    <style>
      .bronze {
        background: rgb(80.4, 49.8, 19.6);
      }
      .silver {
        background: silver   
      }
      .gold {
        background: gold   
      }
    </style>
    <script type="text/javascript">
     
        var x = 0;
        var array = Array();

      function CalculateMember()
        {
        array[x] = document.getElementById("flightNumber").value;
        alert("Flight Number: " + array[x] + " Added at index " + x);
        x++;
        array[x] = document.getElementById("miles").value;
        alert("Miles: " + array[x] + " Added at index " + x);
        x++;
        document.getElementById("flightNumber").value = "";
        document.getElementById("Miles").value = "";
        }

     function DisplayMember()
        {
        var f = "<hr/>";   
    
        for (var y=0; y<array.length; y++)
        {
         f += "Flight Number " + y + " = " + array[y] + "<br/>";
        }
       document.getElementById("Result").innerHTML = e;

        var m = "<hr/>";   
    
    for (var y=0; y<array.length; y++)
    {
      m += "Miles " + y + " = " + array[y] + "<br/>";
    }
         document.getElementById("Result").innerHTML = e;

        }

      function highlightWeightClass(classMember) {
        var rows = document.getElementById("MemberTable").rows;
        rows[0].className = classMember < 10000 ? ".bronze" : "";
        rows[1].className = classMember >= 10000 && classMember < 25000 ? ".silver" : "";
        rows[2].className = classMember >= 25000 ? ".gold" : "";
        
      }

    
    </script>

  </head>
  <body>
    <h1>Find out what Flight Class Member you are!</h1>
    <p>To use, please input the flight number and number of miles and press calculate<p>
    <form name="BMICalculator">

      Flight Number:
      <input type = "text" id="flightNumber" name="flightNumber" value="" /><br />
      Number of Miles:
      <input type = "text" id="miles" name="miles" value="" /><br />


      <input type = "button" id="calculate" name="Calculate" value="Calculate" onclick="CalculateMember();" /> 

      <input type = "button" id="display" name="Display" value="Display" onclick="DisplayMember" /><br />

      <br>

       <div id="Result"></div>

      <br>
      Class Member:
      <input type = "text" id="classMember" name="classMember" value="" /><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>
    </form>
  </body>
</html>

Answer 1

将Miles中的miles更改为document.getElementById("Miles").value：

<!DOCTYPE html>
<html>
  <head>
    <title>Flight Class Member</title>
    <style>
      .bronze {
        background: rgb(80.4, 49.8, 19.6);
      }
      .silver {
        background: silver   
      }
      .gold {
        background: gold   
      }
    </style>
    <script type="text/javascript">
     
        var x = 0;
        var array = Array();

      function CalculateMember()
        {
        array[x] = document.getElementById("flightNumber").value;
        alert("Flight Number: " + array[x] + " Added at index " + x);
        x++;
        array[x] = document.getElementById("miles").value;
        alert("Miles: " + array[x] + " Added at index " + x);
        x++;
        document.getElementById("flightNumber").value = "";
        document.getElementById("miles").value = "";
        }

     function DisplayMember()
        {
        var f = "<hr/>";   
    
        for (var y=0; y<array.length; y++)
        {
         f += "Flight Number " + y + " = " + array[y] + "<br/>";
        }
       document.getElementById("Result").innerHTML = e;

        var m = "<hr/>";   
    
    for (var y=0; y<array.length; y++)
    {
      m += "Miles " + y + " = " + array[y] + "<br/>";
    }
         document.getElementById("Result").innerHTML = e;

        }

      function highlightWeightClass(classMember) {
        var rows = document.getElementById("MemberTable").rows;
        rows[0].className = classMember < 10000 ? ".bronze" : "";
        rows[1].className = classMember >= 10000 && classMember < 25000 ? ".silver" : "";
        rows[2].className = classMember >= 25000 ? ".gold" : "";
        
      }

    
    </script>

  </head>
  <body>
    <h1>Find out what Flight Class Member you are!</h1>
    <p>To use, please input the flight number and number of miles and press calculate<p>
    <form name="BMICalculator">

      Flight Number:
      <input type = "text" id="flightNumber" name="flightNumber" value="" /><br />
      Number of Miles:
      <input type = "text" id="miles" name="miles" value="" /><br />


      <input type = "button" id="calculate" name="Calculate" value="Calculate" onclick="CalculateMember();" /> 

      <input type = "button" id="display" name="Display" value="Display" onclick="DisplayMember" /><br />

      <br>

       <div id="Result"></div>

      <br>
      Class Member:
      <input type = "text" id="classMember" name="classMember" value="" /><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>
    </form>
  </body>
</html>

数组未显示值

1 个答案: