Du må være registrert og logget inn for å kunne legge ut innlegg på freak.no
X
LOGG INN
... eller du kan registrere deg nå
Dette nettstedet er avhengig av annonseinntekter for å holde driften og videre utvikling igang. Vi liker ikke reklame heller, men alternativene er ikke mange. Vær snill å vurder å slå av annonseblokkering, eller å abonnere på en reklamefri utgave av nettstedet.
  8 1279
Morn der.
Prøver å lage en kalkulator som regner ut snitt og karakterpoeng for vgs. og samtidig lære meg JavaScript. Delen for vg1 fungerer fint, men så kommer vg2 da jeg må legge til realfagpoeng for enkelte fag. Koden min vil ikke fungere though, så jeg lurte på om noen kan se hva jeg gjør galt og evt. vise meg "veien videre"?
Koden nedenfor er selvsagt ikke komplett, den prøver bare å legge til poeng dersom man har valgt R1, så når det fungerer skal jeg lage for andre fag. Kalkulatoren for vg1 fungerer fint.

Kode

<head>
<title>sCalc</title>
<SCRIPT type="text/javascript">
var myBonuspoints
document.onload="theBonuspoints()"

function theBonuspoints() {
var chosen = document.vg2.mat2.value ;
	if (chosen == "1")
	{
		var myBonuspoints = 0.5 ;
	}
	else (chosen == "0")
	{
		var myBonuspoints = 0 ;
	}
}
</SCRIPT>
</head>
<body>
<center>
<h3>Videregående 1</h3>  
<!-- Delen som regner ut snittet -->
<form id="vg1">
<p>Matematikk: 
  <Input type="text" id="mat" > </br>
  <br>
Naturfag: 		     
<Input type="text" id="natf" > </br>
<br>
Engelsk:
<Input type="text" id="eng1" ></br>
<br>Samfunnsfag:<Input type="text" id="samf" ></br>
<br>Geografi: <Input type="text" id="geo" >   </br></p>
<p> Gjennomsnitt vg1: <INPUT TYPE="text" id="snitt">
<!-- Gjennomsnittet for vg1 regnes ut når man trykker knappen -->
<input type="button" name="submitCalcvg1" onClick="getElementById('snitt').value=(document.getElementById('mat').value/1+ 
document.getElementById('natf').value/1 + document.getElementById('geo').value/1 + document.getElementById('samf').value/1 + 
document.getElementById('eng1').value/1) /5" target="snitt" value="Regn ut">

<!-- Karakterpoeng for vg1 -->
  <br>Karakterpoeng vg1: <input type="text" id="poeng"> <input type="button" value="Regn ut karakterpoeng vg1" name="submitCalcpovg1" 
  onclick="getElementById('poeng').value=(document.getElementById('snitt').value) *10" target="poeng" ></br></p>
</form>

<form id="vg2" name="vg2">
<!-- 
<h3>Videregående 2</h3>
<p>
  <select name="mat2" id="mat2t" onChange="theBonuspoints()">
    <option value="0">Velg matematikkfag</option>
    <option value="1">Matematikk R1</option>
    <option value="2">Matematikk S1</option>
    <option value="3" onClick="alert('I am disappoint.')">Matematikk 2P</option> 
  </select>  
  <input type="text" id="mat2"> </br>
  <br> 
  <select name="prg21t" id="prg21t" onChange="theBonuspoints()">
    <option id="0">Velg programfag 1</option>
    <option name="fys1" value="1">Fysikk 1</option>
    <option value="2" >Kjemi 1</option>
    <option value="3">Informasjonsteknologi 1</option>
    <option value="4">Internasjonal engelsk</option>
  </select>
  <input type="text" id="prg2-1">
  </br>
  <br> 
  <select name="prg2-2t" id="prg2-2t" >
    <option value="0">Velg programfag 2</option>
    <option value="1">Fysikk 1</option>
    <option value="2" >Kjemi 1</option>
    <option value="3" >Informasjonsteknologi 1</option>
    <option value="4">Internasjonal engelsk</option>
  </select>
  <input type="text" id="prg2-2">
  </br>
  <br> 
  <select name="prg2-3t" id="prg2-3t" >
    <option value="0">Velg programfag 3</option>
    <option value="1" >Kjemi 1</option>
    <option value="2" >Fysikk 1	</option>
    <option value="3">Informasjonsteknologi 1</option>
    <option value="4">Internasjonal engelsk</option>
  </select>
  <input type="text" id="prg2-3">
  </br>
  <br>
  Gjennomsnitt vg2:
  <input type="text" id="snitt2" >
  <!-- Regner ut snittet for vg2 når man trykker på knappen -->
  <input type="button" name="submitCalcvg2" value="Regn ut" onClick="getElementById('snitt2').value=( document.getElementById('prg2-1').value/1 + 
document.getElementById('prg2-2').value/1 + document.getElementById('prg2-3').value/1 + document.getElementById('mat2').value/1)/4" target="snitt2" > 
  
  <input type="reset" name="resetsCalc" value="Reset">  
  
<!-- Gir karakterpoeng for vg2 --> 
  <br>Karakterpoeng vg2:  
  <input type="text" id="karakterpoengvg2" >
  <input type="button" value="Regn ut karakterpoeng vg2" onClick="getElementById('karakterpoengvg2').value=
document.getElementById('snitt2').value *10 + myBonuspoints" target="karakterpoengvg2" >
</p>
</form>
</body>
Her et par generelle tips:

Bruk Firebug til Firefox.
Bruk error-konsollen til nettleseren din. Åpnes med Ctrl+Shift+J.
Prøv å ha all kode i funksjoner. Det blir fort rotete om du plasserer inline-kode over alt.
Trådstarter
Sitat av Ozma Vis innlegg
Her et par generelle tips:

Bruk Firebug til Firefox.
Bruk error-konsollen til nettleseren din. Åpnes med Ctrl+Shift+J.
Prøv å ha all kode i funksjoner. Det blir fort rotete om du plasserer inline-kode over alt.
Vis hele sitatet...
Takk. Men error konsollen finner ikke feilen, derfor jeg sliter. Det fungerer ikke, alt som står som karakterpoeng for vg2 er NaN, kanskje jeg som har missforstått noe?
Sitat av Esso Vis innlegg
Takk. Men error konsollen finner ikke feilen, derfor jeg sliter. Det fungerer ikke, alt som står som karakterpoeng for vg2 er NaN, kanskje jeg som har missforstått noe?
Vis hele sitatet...
VG2-biten din begynner slik:

Kode

<form id="vg2" name="vg2">
<!-- 
<h3>Videregående 2</h3>
Linje 2 der starter en kommentar. Alt som har med VG2 å gjøre ser derfor ut til å være kommentert bort. Ikke så rart det ikke funker da kanskje?! Eller har du limt inn noe galt her kanskje? Hvis du bruker en editor med fargelegging så ser du dette med en gang...
Sist endret av tormaroe; 26. april 2011 kl. 07:01.
Trådstarter
Sitat av tormaroe Vis innlegg
VG2-biten din begynner slik:

Kode

<form id="vg2" name="vg2">
<!-- 
<h3>Videregående 2</h3>
Linje 2 der starter en kommentar. Alt som har med VG2 å gjøre ser derfor ut til å være kommentert bort. Ikke så rart det ikke funker da kanskje?! Eller har du limt inn noe galt her kanskje? Hvis du bruker en editor med fargelegging så ser du dette med en gang...
Vis hele sitatet...
Haha, ja, limte inn galt der. Beklager. Når man fjerner det og så åpner koden får du problemet jeg sikter til.
Hele ligger her:
http://dl.dropbox.com/u/15486478/Esso-karakterkalk.html

Fjernet min lille copy-paste feil. Setter virkelig pris på innspillene deres =)

Kode

<head>
<title>sCalc</title>
<SCRIPT type="text/javascript">
var myBonuspoints
document.onload="theBonuspoints()"

function theBonuspoints() {
var chosen = document.vg2.mat2.value ;
	if (chosen == "1")
	{
		var myBonuspoints = 0.5 ;
	}
	else (chosen == "0")
	{
		var myBonuspoints = 0 ;
	}
}
</SCRIPT>
</head>
<body>
<center>
<h3>Videregående 1</h3>  
<!-- Delen som regner ut snittet -->
<form id="vg1">
<p>Matematikk: 
  <Input type="text" id="mat" > </br>
  <br>
Naturfag: 		     
<Input type="text" id="natf" > </br>
<br>
Engelsk:
<Input type="text" id="eng1" ></br>
<br>Samfunnsfag:<Input type="text" id="samf" ></br>
<br>Geografi: <Input type="text" id="geo" >   </br></p>
<p> Gjennomsnitt vg1: <INPUT TYPE="text" id="snitt">
<!-- Gjennomsnittet for vg1 regnes ut når man trykker knappen -->
<input type="button" name="submitCalcvg1" onClick="getElementById('snitt').value=(document.getElementById('mat').value/1+ 
document.getElementById('natf').value/1 + document.getElementById('geo').value/1 + document.getElementById('samf').value/1 + 
document.getElementById('eng1').value/1) /5" target="snitt" value="Regn ut">

<!-- Karakterpoeng for vg1 -->
  <br>Karakterpoeng vg1: <input type="text" id="poeng"> <input type="button" value="Regn ut karakterpoeng vg1" name="submitCalcpovg1" 
  onclick="getElementById('poeng').value=(document.getElementById('snitt').value) *10" target="poeng" ></br></p>
</form>

<form id="vg2" name="vg2">
<h3>Videregående 2</h3>
<p>
  <select name="mat2" id="mat2t" onChange="theBonuspoints()">
    <option value="0">Velg matematikkfag</option>
    <option value="1">Matematikk R1</option>
    <option value="2">Matematikk S1</option>
    <option value="3" onClick="alert('I am disappoint.')">Matematikk 2P</option> 
  </select>  
  <input type="text" id="mat2"> </br>
  <br> 
  <select name="prg21t" id="prg21t" onChange="theBonuspoints()">
    <option id="0">Velg programfag 1</option>
    <option name="fys1" value="1">Fysikk 1</option>
    <option value="2" >Kjemi 1</option>
    <option value="3">Informasjonsteknologi 1</option>
    <option value="4">Internasjonal engelsk</option>
  </select>
  <input type="text" id="prg2-1">
  </br>
  <br> 
  <select name="prg2-2t" id="prg2-2t" >
    <option value="0">Velg programfag 2</option>
    <option value="1">Fysikk 1</option>
    <option value="2" >Kjemi 1</option>
    <option value="3" >Informasjonsteknologi 1</option>
    <option value="4">Internasjonal engelsk</option>
  </select>
  <input type="text" id="prg2-2">
  </br>
  <br> 
  <select name="prg2-3t" id="prg2-3t" >
    <option value="0">Velg programfag 3</option>
    <option value="1" >Kjemi 1</option>
    <option value="2" >Fysikk 1	</option>
    <option value="3">Informasjonsteknologi 1</option>
    <option value="4">Internasjonal engelsk</option>
  </select>
  <input type="text" id="prg2-3">
  </br>
  <br>
  Gjennomsnitt vg2:
  <input type="text" id="snitt2" >
  <!-- Regner ut snittet for vg2 når man trykker på knappen -->
  <input type="button" name="submitCalcvg2" value="Regn ut" onClick="getElementById('snitt2').value=( document.getElementById('prg2-1').value/1 + 
document.getElementById('prg2-2').value/1 + document.getElementById('prg2-3').value/1 + document.getElementById('mat2').value/1)/4" target="snitt2" > 
  
  <input type="reset" name="resetsCalc" value="Reset">  
  
<!-- Gir karakterpoeng for vg2 --> 
  <br>Karakterpoeng vg2:  
  <input type="text" id="karakterpoengvg2" >
  <input type="button" value="Regn ut karakterpoeng vg2" onClick="getElementById('karakterpoengvg2').value=
document.getElementById('snitt2').value *10 + myBonuspoints" target="karakterpoengvg2" >
</p>
</form>
</body>
Sist endret av Esso; 26. april 2011 kl. 16:43.
Brukeren kan umulig ha valgt en verdi allerede når dokumentet lastes, du må finne bonuspoengene når du regner ut resten av poengene.
Endre onClick-koden til knappen for karakterpoeng vg2 fra "getElementById('karakterpoengvg2').value=document.getElemen tById('snitt2').value *10 + myBonuspoints" til "document.getElementById('karakterpoengvg2').value=document.getElement ById('snitt2').value *10 + myBonuspoints".

Bortsett fra det ser alt ut til å fungere.

EDIT: Nei, det er noe mer som er feil også. myBonuspoints har ingen definert verdi. Dropp document.onLoad og sett heller verdien til 0 som default, og endre den når det skjer endringer i nedtrekksmenyen.

Endre følgende:

Kode

var myBonuspoints
document.onload="theBonuspoints()"

function theBonuspoints() {
var chosen = document.vg2.mat2.value ;
	if (chosen == "1")
	{
		var myBonuspoints = 0.5 ;
	}
	else (chosen == "0")
	{
		var myBonuspoints = 0 ;
	}
}
til:

Kode

var myBonuspoints = 0;

function theBonuspoints() {
	var chosen = document.vg2.mat2t.selectedIndex ;
	if (chosen == 0)
	{
		myBonuspoints = 0 ;
	}
	else
	{
		myBonuspoints = 0.5 ;
	}
}
Hvis det ikke er slik at alle mattefagene gir 0.5 poeng, kan du legge inn "else if(chosen == 1) { } else if(chosen == 2) { }" osv.
Sist endret av Provo; 26. april 2011 kl. 17:04.
Trådstarter
Sitat av Provo Vis innlegg
Endre onClick-koden til knappen for karakterpoeng vg2 fra "getElementById('karakterpoengvg2').value=document.getElemen tById('snitt2').value *10 + myBonuspoints" til "document.getElementById('karakterpoengvg2').value=document.getElement ById('snitt2').value *10 + myBonuspoints".

Bortsett fra det ser alt ut til å fungere.

EDIT: Nei, det er noe mer som er feil også. myBonuspoints har ingen definert verdi. Dropp document.onLoad og sett heller verdien til 0 som default, og endre den når det skjer endringer i nedtrekksmenyen.

Endre følgende:

Kode

var myBonuspoints
document.onload="theBonuspoints()"

function theBonuspoints() {
var chosen = document.vg2.mat2.value ;
	if (chosen == "1")
	{
		var myBonuspoints = 0.5 ;
	}
	else (chosen == "0")
	{
		var myBonuspoints = 0 ;
	}
}
til:

Kode

var myBonuspoints = 0;

function theBonuspoints() {
	var chosen = document.vg2.mat2t.selectedIndex ;
	if (chosen == 0)
	{
		myBonuspoints = 0 ;
	}
	else
	{
		myBonuspoints = 0.5 ;
	}
}
Hvis det ikke er slik at alle mattefagene gir 0.5 poeng, kan du legge inn "else if(chosen == 1) { } else if(chosen == 2) { }" osv.
Vis hele sitatet...
Ja, nå fungerer det!
Tusen takk!
z0p
uʍop ǝpısdn
z0p's Avatar
Lær å skriv god kode med en gang, så slipper du så mye feilsøking
Skill javascript og HTML. event-attributter er vanskelig å lese, og feilsøke. Sett event handlers i en js funksjon som kjøres etter elementene er lastet inn..
Ikke bruk unødvendig mange globale variabler/funksjoner. Globale variabler er dårlig programmeringsskikk, og globale navn vil kunne påvirke andre skript som bruker samme navn. Hold deg helst til maks en, og bruk gjerne annonyme funksjoner.

Kode

function() 
{ 
   // registrer event handlers
    var el = document.getElementById('mitt-element');
    el.onclick = function() { alert('Du klikket på mitt element!'); };
    if ( el.captureEvents ) el.captureEvents( Event.CLICK );
};
for "toolbox" funksjoner kan du bruke f.eks:

Kode

var mittNav = {};

mittNav.minFunksjon = function(arg) {
    // Min funksjon...
    return arg;
}

mittNavn.minVariabel = mittNavn.minFunksjon('mitt arguement');
Dette blir litt tåpelig siden jeg ikke er enig selv i at det er gode eksempler på javascript. Men det viser prinsippet for tankegangen.
Javascript er best tjent med et godt bibliotek som jquery eller lignende når det skrives for nettlesere.

Når du skriver markup i et html dok., mener jeg, at den bør ha en hensikt uten js støtte. Dersom dokumentet er uhensiktmessig uten js støtte, bør du lage markupen/elementene du vil bruke i skriptet.

type:

Kode

var newtEl = document.createElement('div');
newEl.onclick = function() { alert('Du klikket på mitt element!'); };

var oldlEl = document.getElementById('mitt-element');
oldEl.appendChild( newEl );
se litt på programming patterns for javascript. Litt stoff


Skill javascript fra html og css ved å bruke script-taggen.

Kode

<script src="./js/min.js"></script>
Dette gjør det enklere å skille interaktivitet fra oppmerking og styling. Det er enklere å debugge koden, og å kjøre ymse verktøyer på javascriptene.

Javascript bør alltid lastes inn sist i et dokuemnt, om det er ikke er helt nødvendig.

Forøvrig bør du også se litt på god og semantisk HTML, deklarere doctype og følge denne.

Dette ble litt fort og gale føler jeg, og det er nok sneket seg inn en rekke feil og mangler her. Jeg har litt dårlig tid, men vil så gjerne prøve å hjelpe litt når jeg føler jeg kan bidra. Spør gjerne dersom du har noe du lurer på utover dette eller videre i utviklingen.