[Løst] Ploblem med å få javascript til å gi resultat etter å ha lest en form

herdon · 2. oktober 2012

Hei.

Jeg prøver å lage en funksjon på ett av mine nettsteder som skal lages for å hjelpe meg med å øve på en ting til spanskprøven neste uke.

Det jeg skal øve på med dette programmet, som jeg også skal lage som web app for meg selv, er tallene 0-20 på spansk.

Men så kommer problemet, når jeg har fått på plass alt av det som skal gi resultater til meg, så stopper den med en gang jeg skal trykke på "svar"-knappen.

Håper dere kan hjelpe meg, og på forhånd takk.

Her er koden:

<!DOCTYPE html>
<html>
<head>
<title>Øve på tallene 0-20 på spansk</title>
<script>
function nyttTall()
{
var fraSpråk = Math.floor(Math.random()*2);
var norskTall = Math.floor(Math.random()*21);
var spanskTall
switch(norskTall)
{
case 0:
  spanskTall = "cero"
  break;
case 1:
  spanskTall = "uno"
  break;
case 2:
  spanskTall = "dos"
  break;
case 3:
  spanskTall = "tres"
  break;
case 4:
  spanskTall = "cuatro"
  break;
case 5:
  spanskTall = "cinco"
  break;
case 6:
  spanskTall = "seis"
  break;
case 7:
  spanskTall = "siete"
  break;
case 8:
  spanskTall = "ocho"
  break;
case 9:
  spanskTall = "nueve"
  break;
case 10:
  spanskTall = "diez"
  break;
case 11:
  spanskTall = "once"
  break;
case 12:
  spanskTall = "doce"
  break;
case 13:
  spanskTall = "trece"
  break;
case 14:
  spanskTall = "catorce"
  break;
case 15:
  spanskTall = "quince"
  break;
case 16:
  spanskTall = "dieciseis"
  break;
case 17:
  spanskTall = "diecisiete"
  break;
case 18:
  spanskTall = "dieciocho"
  break;
case 19:
  spanskTall = "diecinueve"
  break;
case 20:
  spanskTall = "veinte"
  break;
}
if (fraSpråk == 0) {
norskTall = norskTall + " - <input type='text' name='svar' value=''> <input type=button value='Svar' onclick='svaret()'>";
document.getElementById("tall").innerHTML=norskTall;
}
else {
spanskTall = spanskTall + " - <input type='text' name='svar' value=''> <input type=button value='Svar' onclick='svaret()'>";
document.getElementById("tall").innerHTML=spanskTall;
}
}
</script>
<script>
function svaret()
{
var brukerSvar=document.forms['tallet']['svar'].value;
var resultat;
if (fraSpråk == 0 && brukerSvar == spanskTall) {
resultat="Helt riktig, " + norskTall + " er " + spanskTall + "!";
}
else if (fraspråk == 0 && brukersvar != spanskTall) {
resultat="Feil, " + norskTall + " er " + spanskTall + "!";
}
else if (fraSpråk == 1 && brukersvar == norskTall) {
resultat="Helt riktig, " + spanskTall + " er " + norskTall + "!";
}
else if (fraSpråk == 1 && brukersvar != norskTall) {
resultat="Feil, " + spanskTall + " er " + norskTall + "!";
}
document.getElementById("svar").innerHTML=resultat;
document.getElementById("tall").innerHTML="<button type="button" onclick="nyttTall()">Nytt tall</button>
}
</script>
</head>
<body>
<h1>Øve på spanske tall 0-20</h1><br>
<p id="svar"></p><br>
<form name="tallet" action="" method="post">
<p id="tall"><button type="button" onclick="nyttTall()">Start</button></p>
</form>
</body>
</html>

og her er linken til resultatet hvis noen vil se nærmere på når den stopper: http://heru.host22.com/ove_spansk_tall_0_20.html

herdon · 2. oktober 2012

Forresten, hvis jeg istedenfor å bruke

<input type=button

, og heller bruker

<input type=submit

og legger på

onSubmit=return svaret()

og skriver

return false;

nederst i funksjonen svaret(), så tar den alikevel å sender meg til en annen side (her laster inn siden på nytt), merkelig hva.

hjahre · 2. oktober 2012

Nå har jeg ikke sett mye på koden din, men først noen syntax-"feil".

Når du trenger

i tekststrenger skal du enten escape tegnet, altså

\"

eller bruke

.

Trenger du virkelig TO skript-blokker?

Rett bruk av

<input type="submit" />

og

onSubmit

i en form, er:

<form onsubmit="fn()">
<input type="submit" />
</form>

der fn() er det som skal kjøre når du klikker på submit.

Hvilken nettleser bruker du? Hvis du bruker Opera eller Chrome kan du få opp Developer Tools ved å trykke [ctrl]+[shift]+, i Firefox vet jeg ikke. Det kan være lurt å debugge for å se hva som skjer

Crowly · 2. oktober 2012

Putt variablene utenfor funksjonene, slik at de blir globale. Og variabel navn er case sensitivt, det er litt miks av store og små bokstaver. Usikker på om æøå er så lurt å bruke i variabler.

Dette fungerer

Edit: Litt rask på klipp og lim, se bedre løsning lengre ned.

Endret 2. oktober 2012 av Crowly

herdon · 2. oktober 2012

Takk til dere begge, det funker nå, med deres hjelp.

herdon · 2. oktober 2012

Forresten Crowly, man må gjøre variablene globale, men hvis man har

norskTall = Math.floor(Math.random()*21);

sammen med dem, oppdateres den bare når man laster inn siden på nytt.

Her er den 100% riktige koden:

<!DOCTYPE html>
<html>
<head>
<title>Øve på tallene 0-20 på spansk</title>
<script type="text/javascript">
var fraSprak;
var spanskTall;
var norskTall;
function nyttTall()
{
fraSprak = Math.floor(Math.random()*2);
norskTall = Math.floor(Math.random()*21);
switch(norskTall)
{
case 0:
   spanskTall = "cero"
   break;
case 1:
   spanskTall = "uno"
   break;
case 2:
   spanskTall = "dos"
   break;case 3:
   spanskTall = "tres"
   break;
case 4:
   spanskTall = "cuatro"
   break;
case 5:
   spanskTall = "cinco"
   break;
case 6:
   spanskTall = "seis"
   break;
case 7:
   spanskTall = "siete"
   break;
case 8:
   spanskTall = "ocho"
   break;
case 9:
   spanskTall = "nueve"
   break;
case 10:
   spanskTall = "diez"
   break;
case 11:
   spanskTall = "once"
   break;
case 12:
   spanskTall = "doce"
   break;
case 13:
   spanskTall = "trece"
   break;
case 14:
   spanskTall = "catorce"
   break;
case 15:
   spanskTall = "quince"
   break;
case 16:
   spanskTall = "dieciseis"
   break;
case 17:
   spanskTall = "diecisiete"
   break;
case 18:
   spanskTall = "dieciocho"
   break;
case 19:
   spanskTall = "diecinueve"
   break;
case 20:
   spanskTall = "veinte"
   break;
}
if (fraSprak == 0) {
 document.getElementById("tall").innerHTML=norskTall + " - <input type='text' name='svar' value=''> <input type=button value='Svar' onclick='svaret()'>";
}
else {
 document.getElementById("tall").innerHTML=spanskTall + " - <input type='text' name='svar' value=''> <input type=button value='Svar' onclick='svaret()'>";
}
}
function svaret()
{
var brukerSvar=document.forms['tallet']['svar'].value;
var resultat;
if (fraSprak == 0 && brukerSvar == spanskTall) {
 resultat="Helt riktig, " + norskTall + " er " + spanskTall + "!";
}
else if (fraSprak == 0 && brukerSvar != spanskTall) {
 resultat="Feil, " + norskTall + " er " + spanskTall + "!";
}
else if (fraSprak == 1 && brukerSvar == norskTall) {
 resultat="Helt riktig, " + spanskTall + " er " + norskTall + "!";
}
else if (fraSprak == 1 && brukerSvar != norskTall) {
 resultat="Feil, " + spanskTall + " er " + norskTall + "!";
}
document.getElementById("svar").innerHTML=resultat;
document.getElementById("tall").innerHTML='<button type="button" onclick="nyttTall()">Nytt tall</button>';
return false;
}
</script>
</head>
<body>
<h1>Øve på spanske tall 0-20</h1>
<br>
<p id="svar"></p><br>
<form name="tallet" action="" method="post" onsubmit="return svaret();">
<p id="tall"><button type="button" onclick="nyttTall();">Start</button></p>
</form>
</body>
</html>

Terrasque · 2. oktober 2012

Tok utgangaspunktet i Crowly's kode (som ikke funket helt..) og ryddet litt opp i ting.

<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <title>Øve på tallene 0-20 på spansk</title>
<script type="text/javascript">
   var fraSprak = Math.floor(Math.random()*2);
   var spanskTall;
   var buttoncode = " - <input id='svarfield' type='text' name='svar' value='' placeholder='Answer goes here'> <input type=button value='Svar' onclick='svaret()'>";
   var norskTall;
   var sp_numbers = new Array(
	    "cero", "uno", "dos",
	    "tres","cuatro", "cinco",
	    "seis", "siete", "ocho",
	    "nueve", "diez", "once",
	    "doce", "trece", "catorce",
	    "quince", "dieciseis", "diecisiete",
	    "dieciocho", "diecinueve", "veinte"
   );
   var totalNumbers=0;
   var rightNumbers=0;
   function nyttTall()
   {
	    norskTall = Math.floor(Math.random() * (sp_numbers.length));
	    fraSprak = Math.floor(Math.random()*2);
	    spanskTall = sp_numbers[norskTall];
	    var data = (fraSprak) ? norskTall : spanskTall;
	    document.getElementById("tall").innerHTML = data + buttoncode;
           document.getElementById("svarfield").focus();
	    totalNumbers++;
   }
   function svaret()
   {
	    var brukerSvar = document.getElementById("svarfield").value;
	    var resultat1;
	    var resultat2;
	    var riktigsvar = (fraSprak) ? spanskTall : norskTall;
	    if (fraSprak) {
			    resultat2 = norskTall + " er " + spanskTall + "!";
	    } else {
			    resultat2 = spanskTall + " er " + norskTall + "!";
	    }
	    if (riktigsvar == brukerSvar) {
		    resultat1 = "Riktig! ";
		    rightNumbers++;
	    } else {
               resultat1 = "Feil! ";
	    }
	    document.getElementById("svar").innerHTML = resultat1 + resultat2;
	    document.getElementById("tall").innerHTML = '<button type="button" onclick="nyttTall()" id="newNumber">Nytt tall</button>';
	    document.getElementById("results").innerHTML = rightNumbers + " av " + totalNumbers;
           document.getElementById("newNumber").focus();
	    return false;
   }
</script>
</head>
<body>
   <h1>Øve på spanske tall 0-20</h1>
   <span id="results">N/A</span> rette
   <p id="svar"></p>
 <form onsubmit="return svaret();">
 <p id="tall">
   <button type="button" onclick="nyttTall();">Start</button>
 </p>
 </form>
</body>
</html>

Brukte ikke jQuery her (selv om jeg ble litt fristet.. DOM manipulering er så mye enklere der) siden original spørsmålet var ren JS.

Edit: Fikset litt på et par småting, og gjorde ting litt mer keyboard vennlig.

Endret 2. oktober 2012 av Terrasque

herdon · 3. oktober 2012

Ja, det er jo også en måte å gjøre det på, Tarrasque.

Olavxxx · 11. oktober 2012

Det er veldig lett å jukse i appen din, vet ikke om det er viktig?

Crowly · 11. oktober 2012

Formålet er "for å hjelpe meg med å øve på en ting til spanskprøven neste uke", så jeg tviler på at juksing er noe å bry seg om når man lager noe til seg selv. Skal man først jukse så er jo alt dette bare bortkastet tid

Olavxxx · 11. oktober 2012

Formålet er "for å hjelpe meg med å øve på en ting til spanskprøven neste uke", så jeg tviler på at juksing er noe å bry seg om når man lager noe til seg selv. Skal man først jukse så er jo alt dette bare bortkastet tid

He he, sant nok..

herdon · 13. oktober 2012

Formålet er "for å hjelpe meg med å øve på en ting til spanskprøven neste uke", så jeg tviler på at juksing er noe å bry seg om når man lager noe til seg selv. Skal man først jukse så er jo alt dette bare bortkastet tid

He he, sant nok..

Tenk på det på denne måten: Ting som er lagd for å øve på, uansett hvem det er til, så er det dumt å jukse.

Forresten, eneste måten jeg kan tenke meg at man kan jukse på, er å se i kildekoden, og den eneste måten jeg kan forhindre det på, er å legge det i en egen js-fil, men man kan jo se kildekoden til js-filen også, så det ville vært vanskelig å få gjort den helt sikker på slik jeg ser det

Crowly · 13. oktober 2012

Man må nok ta i bruk noe server side scripting (f.eks. php). Men så lenge man selv er forfatter av applikasjonen, så vil man alltid kunne jukse. Men som nevnt, hvis man først skal jukse, hvorfor kaste bort tid på å lage en applikasjon til å hjelpe seg å øve med, når man heller burde bruke tiden på å perfeksjonere juksingen

Logg inn

[Løst] Ploblem med å få javascript til å gi resultat etter å ha lest en form

Anbefalte innlegg

herdon

Lenke til kommentar

Videoannonse

herdon

Lenke til kommentar

hjahre

Lenke til kommentar

Crowly

Lenke til kommentar

herdon

Lenke til kommentar

herdon

Lenke til kommentar

Terrasque

Lenke til kommentar

herdon

Lenke til kommentar

Olavxxx

Lenke til kommentar

Crowly

Lenke til kommentar

Olavxxx

Lenke til kommentar

herdon

Lenke til kommentar

Crowly

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Populær nå

Nei til pride 2024! 1 2 3 4 26

Hvem er aktive 0 medlemmer