Avatar billede JavaScriptBegynderen Juniormester
11. november 2021 - 16:17 Der er 6 kommentarer

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>
Avatar billede jakobdo Ekspert
11. november 2021 - 18:57 #1
Tror noget ala dette kunne hjælpe dig:

https://www.w3schools.com/js/js_htmldom_html.asp

Og hvis linket dør, er det sådan her:
<p id="p1">Hello World!</p>

<script>
document.getElementById("p1").innerHTML = "New text!";
</script>
Avatar billede JavaScriptBegynderen Juniormester
11. november 2021 - 19:17 #2
Tak for svaret, men indholdet ændre sig jo hele, og er ikke konstant, som jeg fornemmer ovenstående string: "New Text!" henviser til?

Outputet skal jo ændre sig i tankt med det input man indsætter. Det jo en regnemaskine.

Hedder det noget andet end output. Idk. Håber I kan hjælpe, og forstår mig :)
Avatar billede jakobdo Ekspert
12. november 2021 - 07:00 #3
Du skal kigge på noget der hedder events. Du må prøve lidt selv. Hvis ikke du finder svaret, skal jeg give dig det senere. 😜
Avatar billede JavaScriptBegynderen Juniormester
14. november 2021 - 10:54 #4
Hej. Jeg kan ikke finde, hvilken en af dem jeg skal bruge. Har prøvet et par stykker, men hvilken giver mening i min case?
Avatar billede JavaScriptBegynderen Juniormester
14. november 2021 - 10:55 #5
Kan regne ud det næsten må være "oninput", men hvor i koden skal den placeres for at virke efter hensigten.

På forhånd tak
Avatar billede jakobdo Ekspert
14. november 2021 - 13:23 #6
oninput er et glimrende valg.
Prøv at se hvordan de bruger den her og se om du måske selv kan finde et passende sted at placere den:

https://www.w3schools.com/Jsref/tryit.asp?filename=tryjsref_oninput
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester