Hjælp til output i regnemaskine (JavaSpript+HTML)
Dav.Jeg er ved at løse en skoleopgave, hvor jeg skal programmere en regnemaskine, der kan omsætte nogle tal.
Jeg har valgt et fly (Airbus), og ønsker at få resultatet af liter brændstof i flyets tank på baggrund af følgende:
- Efter X liter brændstof er brugt, forøges flyets tankbeholdning med X
- Efter at have fkøjet Y minuter bliver flyets sænkes flyets tankbeholdning med Y * 40 (fordi).
Jeg er blevet bedt om at lave dets interface også. JEg har lavet knapperne i HTML, men hvordan indsætter jeg output?
Se følgende kode:
<head>
<title>Airbus flight calculator</title>
</head>
<body>
<h1 id="h1Title">Calculate the amount of fuel in the tank of an airbus</h1>
<img src="https://giffiles.alphacoders.com/107/107587.gif"
alt="" width="300">
<div>
<input id="usedLitersOfFuelInput" type="number" placeholder="Minutes flown">
<button onclick="usedLitersOfFuelButtonPressed()">Get used liters of fuel</button>
<br>
<input id="flyInput" type="number" placeholder="Kilometers flown">
<button onclick="flyButtonPressed()">Get fuel used</button>
</div>
<script>
class airplain {
tank = 0
citiesVisited = []
currentLocation = undefined
constructor(aLocation) {
this.changeLocation(aLocation)
}
fuelUsed(usedLitersOfFuel) {
this.tank = this.tank + usedLitersOfFuel
}
fly(minutes) {
this.tank = this.tank - minutes * 40 //Becuse a airplain use 40 l. fuel pr. min.
}
visit(newLocation) {
let minutesToFly =
newLocation.timeTo(this.currentLocation)
this.fly(minutesToFly)
this.changeLocation(newLocation)
}
changeLocation(aLocation) {
this.currentLocation = aLocation
this.citiesVisited.push(aLocation)
}
}
class City {
constructor(name) {
this.name = name
}
distanceTo(anotherCity) {
return 6026 //The distance to NY is 6026 km.
}
}
let cph = new City("Copenhagen")
let newyork = new City("NewYork")
let airbus = new airplain(newyork)
console.log(airbus)
airbus.fuelUsed(15000) //The fuel in the tank is 15000
console.log(airbus)
airbus.fly(350) //It takes 350 min to fly to NY
console.log(airbus)
</script>
</body>
</html>
