Hjælp til IT lektier

[Marjun]

Hej,

Jeg går på EUX og vi har i IT fået en opgave som virkelig volder mig besvær.

Dette er opgaven:
ØVELSE 6.18: HTML, CSS OG JAVASCRIPT ID

Et nyt taxaselskab vil markedsføre sig på, at de altid har en gennemskuelig, forudbestemt og fair pris.

De vil derfor oprette et website, hvor kunden kan indtaste sit afrejsetidspunkt og rejsens antal kilometer, hvorefter turens pris beregnes. Prisen for turen skal herefter blive fremvist.

Selskabet har forskellige takster på forskellige tidspunkter af døgnet. De arbejder med dagtakster, aftentakster og nattakster, baseret på afrejsetidspunktet.

Taksterne er som følger:

Dagtakst Aftentakst Nattakst
(kl. 6.00-17.59) (kl. 18.00-23.59) (kl. 0.00-5.59)
Startgebyr kr. 35,- kr. 45,- kr. 50,-
Pris pr. kørt km kr. 16,- kr. 18,- kr. 22,-

Du skal oprette et websted i HTML-koder med et JavaScript indlejret. Kravet til webstedet er, at det indeholder en formular til indtastning af input, som anvendes af jeres script til interaktion med brugeren.

Webstedet skal desuden layoutmæssigt fremstå brugervenligt, og layout skal styres af et eksternt stylesheet.

Jeg har nogenlunde styr på selve siden, men det er udregneren der volder mig problemer.
Vi har fået følgende at vide af vores lærer men kan ikke få det til at virke:
function udregn(){

var tidspunkt;

var Kilometer;

var resultat;

var res;

dkk=document.form.kroner.value;

kurs=document.form.valutakurs.value;

IF TID < 6
THEN resultat=50+(Kilometer*22)
ELSE IF tid < 18
THEN resultat=35+(Kilometer*16)
ELSE resultat=45+(Kilometer*18);

res=resultat.toFixed(2);

res=100

window.alert("Turens pris er: "+res+" kroner");


Er der en venlig sjæl der kan hjælpe mig? Jeg skal aflevere siden på mandag.
Marjun

[jepperask]

Jeg er overhovedet ikke skarp til javascript, men jeg tror ikke følgende er javascript syntax:

Kode: Vælg alt

IF TID < 6
THEN resultat=50+(Kilometer*22)
ELSE IF tid < 18
THEN resultat=35+(Kilometer*16)
ELSE resultat=45+(Kilometer*18);

Det ligner mest af alt bare psuedo-kode - og hvor kommer variablen TID fra? Menes der tidspunkt?

Jeg ville omskrive det til:

Kode: Vælg alt

if (tidspunkt < 6) {
	resultat = 50 + (kilometer*22);
} else if (tidspunkt < 18) {
	resultat = 35 + (kilometer*16);
} else {
	resultat = 45 + (kilometer*18);
}

Kan ikke rigtigt teste det, da jeg ikke ved hvordan resten ser ud - og hvad variablerne dkk og kurs er.

[Marjun]

Hej Jeppe.

Tak for forsøget på at hjælpe mig, men det virker desværre ikke.

Jeg tror at jeg må kaste håndklædet i ringen med denne her.

ÆV

Vh. Marjun

[jepperask]

Hej Jeppe.

Tak for forsøget på at hjælpe mig, men det virker desværre ikke.

Jeg tror at jeg må kaste håndklædet i ringen med denne her.

ÆV

Vh. Marjun

Send mig en pm ellers, så skal jeg nok hjælpe dig.

[Marjun]

Tak Jeppe, men det kan jeg ikke.
Den siger at jeg skal være mere aktiv!!!
Det er vist ikke min dag

[jepperask]

Ah okay - men første skridt må være at finde ud af hvor fejlen(e) ligger.
En (hurtig) måde at debugge, er ved at sætte

Kode: Vælg alt

window.alert(variabelnavn);

efter hver linje hvor variablerne bliver brugt - det kan også være developer tools i chrome/firefox/edge kan fortælle dig hvad problemet er. Jeg ved at Chrome fanger syntax-fejl osv.

Kan du eventuelt indsætte resten af koden? (Gerne benyt den knap der hedder "Code" her i editoren)

[Marjun]

Okey, jeg prøver.
Dette er de takster den skal kunne udregne:

Dagtakst Aftentakst Nattakst
(kl. 6.00-17.59) (kl. 18.00-23.59) (kl. 0.00-5.59)
Startgebyr kr. 35,- kr. 45,- kr. 50,-
Pris pr. kørt km kr. 16,- kr. 18,- kr. 22,-
(Skulle ha' stået i en tabel men det ville den ikke. Håber du kan forstå det alligevel)

Du skal oprette et websted i HTML-koder med et JavaScript indlejret. Kravet til webstedet er, at det indeholder en formular til indtastning af input, som anvendes af jeres script til interaktion med brugeren.

Webstedet skal desuden layoutmæssigt fremstå brugervenligt, og layout skal styres af et eksternt stylesheet.

Stylesheet først

Kode: Vælg alt

body {

background-color: #663333;
font-family: "berlin sans FB";

}

#hoved {

width: 99%;

height: 1000px;

margin-left: auto;

margin-right: auto;

border-style: solid;

border-width: thin;

border-radius: 15px;

background-color:#CC3333;


}

#top {

width: 90%;

height: 200px;

margin-left: auto;

margin-right: auto;

margin-top: 2%;

border-style: solid;

border-color: white;

border-width: 10px;

border-radius: 15px;

text-align: center;

background-color: 	#663366;

vertical-align: middle;

line-height: 150px;



}

#menu {

width: 18%;

height: 700px;

border-style: solid;

border-color: white;

border-width: 10px;

border-radius: 15px;

margin-left: 5%;

margin-top: 1%;

float: left;

background-color: 	#663366;




}

#indhold {

width: 68%;

height: 700px;

border-style: solid;

border-color: white;

border-width: 10px;

border-radius: 15px;

margin-right: 5%;

margin-top: 1%;

float: right;

background-color: 	#996699;

}

a {

text-decoration: none;

color: black;

}

p.afsnit1 {

font-size:56pt;


color: #000000;

margin-top: 30px;

}

p.afsnit2 {


color: #000000;

margin-left: 50px;

}

h1 {


color: #000000;

margin-left: 50px;

}

Den side formularen skal sættes ind på:

Kode: Vælg alt

<!DOCTYPE html>

<!-- Eksempel på brug af DIV til at opdele en HTML-side i sektioner. CSS-filen style.css er tilknyttet til siden som eksternt stylesheet. -->

<html>

<head>

<title>Beregn din pris</title>

<meta charset="UTF-8">

<link rel="stylesheet" href="style.css" type="text/css"/>

</head>

<body>

<div id="hoved"> <!--Rammen der dækker hele siden-->

<div id="top"><!--Rammen der er i toppen af siden-->

<p class="afsnit1">Knord's taxaselskab</p>

</div>

<div id="menu"> <!--Rammen der er sidens venste side med menupunkter-->

<ul>

	<h2>Menu</h2><br>

<li><a href="Index.html"> Forside</a><br><br>
<li><a href="Beregn din pris.html"> Beregn din pris</a><br><br>
<li><a href="Vores biler.html"> Vores biler</a><br><br>
<li><a href="Under ombygning.html"> Under opbygning</a><br><br>
<li><a href="Under ombygning.html"> Under opbygning</a><br><br>
<li><a href="Kontakt os.html"> Kontakt os</a><br><br>

</li>

</ul>

</div>

<div id="indhold"> <!--Rammen der er til højre med sidens indhold-->

<center>

<h2>Her kan du beregne din pris.</h2>

</div>

</div>

</body>

</html>

Vi har fået at vide at vi skal bruge denne formular og så "bare" omskrive den.

Kode: Vælg alt

<!DOCTYPE html>

<html>

<head>

<title>Javascript med valuta</title>

<meta charset="UTF-8">

</head>

<body>

<script>

function udregn(){

var dkk;

var kurs;

var resultat;

var res;

dkk=document.form.kroner.value;

kurs=document.form.valutakurs.value;

resultat=dkk/kurs;

res=resultat.toFixed(2);

window.alert("Det indtastede beløb svarer til: "+res+" Euro");

}

</script>

<h1><b>Omregning fra danske kroner til Euro</b></h1>
<form method="POST" name="form" action="">

<p>Indtast beløbet i danske kroner: <input type="text" name="kroner" size="10"></p>

<p>Indtast aktuel kurs på Euro: <input type="text" name="valutakurs" size="10"></p>

<p><input type="button" value="UDREGN" name="knap" onclick="udregn()"></p>
</form>

</body>

</html>

Og det er så her den går helt galt.

[Marjun]

Nu fik jeg lige sat formularen ind på siden, men den skal stadig omskrives så den regner det rigtigt ud.

Kode: Vælg alt

<!DOCTYPE html>

<!-- Eksempel på brug af DIV til at opdele en HTML-side i sektioner. CSS-filen style.css er tilknyttet til siden som eksternt stylesheet. -->

<html>

<head>

<title>Beregn din pris</title>

<meta charset="UTF-8">

<link rel="stylesheet" href="style.css" type="text/css"/>

</head>

<body>

<div id="hoved"> <!--Rammen der dækker hele siden-->

<div id="top"><!--Rammen der er i toppen af siden-->

<p class="afsnit1">Knord's taxaselskab</p>

</div>

<div id="menu"> <!--Rammen der er sidens venste side med menupunkter-->

<ul>

	<h2>Menu</h2><br>

<li><a href="Index.html"> Forside</a><br><br>
<li><a href="Beregn din pris.html"> Beregn din pris</a><br><br>
<li><a href="Vores biler.html"> Vores biler</a><br><br>
<li><a href="Under ombygning.html"> Under opbygning</a><br><br>
<li><a href="Under ombygning.html"> Under opbygning</a><br><br>
<li><a href="Kontakt os.html"> Kontakt os</a><br><br>

</li>

</ul>

</div>

<div id="indhold"> <!--Rammen der er til højre med sidens indhold-->

<center>

<h2>Her kan du beregne din pris.</h2>

<script>

function udregn(){

var dkk;

var kurs;

var resultat;

var res;

dkk=document.form.kroner.value;

kurs=document.form.valutakurs.value;

resultat=dkk/kurs;

res=resultat.toFixed(2);

window.alert("Det indtastede beløb svarer til: "+res+" Euro");

}

</script>

<h1><b>Beregning af turens pris:</b></h1>
<form method="POST" name="form" action="">

<p>Indtast timetallet for turens start: <input type="text" name="kroner" size="10"></p>

<p>Indtast turens antal kilometer: <input type="text" name="valutakurs" size="10"></p>

<p><input type="button" value="UDREGN" name="knap" onclick="udregn()"></p>
</form>
</div>

</div>

</body>

</html>

[jepperask]

Prøv dette:

Kode: Vælg alt

<!DOCTYPE html>

<!-- Eksempel på brug af DIV til at opdele en HTML-side i sektioner. CSS-filen style.css er tilknyttet til siden som eksternt stylesheet. -->

<html>

<head>

<title>Beregn din pris</title>

<meta charset="UTF-8">

<link rel="stylesheet" href="style.css" type="text/css"/>
<script>

function udregn(){

	var dkk;

	var kurs;

	var resultat;

	var res;

	tidspunkt = document.form.tidspunkt.value;

	kilometer = document.form.kilometer.value;

	if (tidspunkt < 6) {
	   resultat = 50 + (kilometer*22);
	} else if (tidspunkt < 18) {
	   resultat = 35 + (kilometer*16);
	} else {
	   resultat = 45 + (kilometer*18);
	}

	res=resultat.toFixed(2);

	window.alert("Prisen bliver: " + res + " kroner.");

}

</script>
</head>

<body>

<div id="hoved"> <!--Rammen der dækker hele siden-->

<div id="top"><!--Rammen der er i toppen af siden-->

<p class="afsnit1">Knord's taxaselskab</p>

</div>

<div id="menu"> <!--Rammen der er sidens venste side med menupunkter-->

<ul>

   <h2>Menu</h2><br>

<li><a href="Index.html"> Forside</a><br><br>
<li><a href="Beregn din pris.html"> Beregn din pris</a><br><br>
<li><a href="Vores biler.html"> Vores biler</a><br><br>
<li><a href="Under ombygning.html"> Under opbygning</a><br><br>
<li><a href="Under ombygning.html"> Under opbygning</a><br><br>
<li><a href="Kontakt os.html"> Kontakt os</a><br><br>

</li>

</ul>

</div>

<div id="indhold"> <!--Rammen der er til højre med sidens indhold-->

<center>

<h2>Her kan du beregne din pris.</h2>

</div>
<h1><b>Prisberegning</b></h1>
<form method="POST" name="form" action="">

<p>Indtast tidspunkt: <input type="text" name="tidspunkt" size="10"></p>

<p>Indtast kilometer: <input type="text" name="kilometer" size="10"></p>

<p><input type="button" value="UDREGN" name="knap" onclick="udregn()"></p>
</form>

</div>

</body>

</html>

Har prøvet at skrive 9 ved tidspunkt, 120 ved kilometer og den svarer så med 1955.00 kroner.

[Marjun]

Jeppe, du er min nye IT-helt.

Det virker. Har lige prøvet en udregning.

Hvor dejligt. Nu skal jeg så bare nærlæse din kode så jeg kan se hvad der gjorde at det virkede.
Jeg kan slet ikke takke dig nok. Det er så frustrerende når ens lærer ikke kan fortælle hvad man skal gøre.

Dejligt med mennesker som dig der gider hjælpe en noob som mig.

[jepperask]

Det var så lidt - bare skriv hvis jeg skal uddybe noget af det.