如何显示表格条目的计算？
我的代码应该通过将油箱容积除以行驶距离来计算车辆的油耗，然后在表格行“油耗”中显示答案。然后，“最高效”的列应该在最高效的车辆。
作业说要使用一个对象，但我只是不明白它们是如何工作的。请帮忙，我被卡住了。
<table>
<tr>
<th>Registration Number</th>
<th>Volume of fuel tank (litres)</th>
<th>Distance traveled on full tank (km) </th>
<th>Fuel consumption (litres/Km) </th>
<th>Most efficient</th>
</tr>
<tr>
<td><p id="registration1"></p></td>
<td><p id="tank1"></p></td>
<td><p id="distance1"></p></td>
<td><p id="consumption1"></p></td>
<td><p id="efficient1"></p></td>
</tr>
<tr>
<td><p id="registration2"></p></td>
<td><p id="tank2"></p></td>
<td><p id="distance2"></p></td>
<td><p id="consumption2"></p></td>
<td><p id="efficient2"></p></td>
</tr>
<tr>
<td><p id="registration3"></p></td>
<td><p id="tank3"></p></td>
<td><p id="distance3"></p></td>
<td><p id="consumption3"></p></td>
<td><p id="efficient3"></p></td>
</tr>
<tr>
<td><p id="registration4"></p></td>
<td><p id="tank4"></p></td>
<td><p id="distance4"></p></td>
<td><p id="consumption4"></p></td>
<td><p id="efficient4"></p></td>
</tr>
</table>
<script>
var i = 1;
var registration = [];
var tank = [];
var distance = [];
var consumption = [];
function Vehicle() {
for (i = 1; i < 5; i++) {
registration.push(prompt("Please enter a 6-character vehicle registration number"));
document.getElementById("registration" + i).innerHTML = registration[i - 1];
tank.push(prompt("Please enter the volume of the vehicle's fuel tank in litres"));
document.getElementById("tank" + i).innerHTML = tank[i - 1];
distance.push(prompt("Please enter the distance the vehicle can travel on a full tank of fuel"));
document.getElementById("distance" + i).innerHTML = distance[i - 1];
jeck猫2回答
-
明月笑刀无情
我们应该能够收集数据，创建一个车辆对象，然后按油耗排序。然后，我们将在与最高效车辆对应的行旁边显示一个星号。function getVehicleInfo(vehicleId) { var vehicle = {}; vehicle.id = vehicleId; vehicle.registration = prompt("Please enter a 6-character vehicle registration number"); vehicle.tank = (parseFloat(prompt("Please enter the volume of the vehicle's fuel tank in litres"))); vehicle.distance = (parseFloat(prompt("Please enter the distance the vehicle can travel on a full tank of fuel"))); // Fuel consumption is fuel used per kilometre. (Check for divide by zero) vehicle.consumption = vehicle.distance ? (vehicle.tank / vehicle.distance): null; return vehicle;}function displayVehicleInfo(vehicle) { rowElement = document.createElement("tr"); rowElement.setAttribute("id", vehicle.id); tableElement = document.getElementById("vehicle-table"); vehicleHtml = `<td>${vehicle.registration}</td>` vehicleHtml += `<td>${vehicle.tank}</td>` vehicleHtml += `<td>${vehicle.distance}</td>` vehicleHtml += `<td>${vehicle.consumption ? vehicle.consumption.toFixed(2): 'Unknown'}</td>`; rowElement.innerHTML = vehicleHtml; tableElement.appendChild(rowElement); return vehicle;}function ShowVehicleData() { var vehicles = []; for (var i = 1; i < 5; i++) { // Create a vehicle object from the user input. var vehicle = getVehicleInfo(i); displayVehicleInfo(vehicle); vehicles.push(vehicle); } // Find the most efficient by sorting by fuel consumption. vehicles.sort((vehicleA, vehicleB) => vehicleA.consumption - vehicleB.consumption); mostEfficientId = vehicles[0].id; document.getElementById(mostEfficientId).innerHTML += "<td>*</td>"}ShowVehicleData();<head><link rel="stylesheet" href="https://bootswatch.com/4/cerulean/bootstrap.css" crossorigin="anonymous"></head><body><table id="vehicle-table" class="table table-striped"><tr> <th>Registration Number</th> <th>Volume of fuel tank (litres)</th> <th>Distance traveled on full tank (km) </th> <th>Fuel consumption (litres/Km) </th> <th>Most efficient</th></tr></table></body> -
紫衣仙女
您可以在此处阅读有关 javascript 对象的更多信息var vehicles = [];function Vehicle() { var lowestConsumption = Infinity; var efficient = 0; for (var i = 1; i < 5; i++) { var vehicle = {}; //initialize an empty object vehicle.registration = prompt("Please enter a 6-character vehicle registration number"); document.getElementById("registration" + i).innerHTML = vehicle.registration; vehicle.tank = prompt("Please enter the volume of the vehicle's fuel tank in litres"); document.getElementById("tank" + i).innerHTML = vehicle.tank; vehicle.distance = prompt("Please enter the distance the vehicle can travel on a full tank of fuel"); document.getElementById("distance" + i).innerHTML = vehicle.distance; vehicle.consumption = Number(vihecle.tank) / Number(vehicle.distance); //Number(string) will change the string to a number! document.getElementById("consumption" + i).innerHTML = vehicle.consumption.toString(); if (vehicle.consumption < lowestConsumption) { lowestConsumption = vihecle.consumption; efficient = i; } vehicles.push(vehicle); } document.getElementById("efficient" + efficient).innerHTML = "*";}
随时随地看视频慕课网APP
相关分类
JavaScript