---
title: "Tipsradsystem"
type: "forum-thread"
url: "https://www.webforum.nu/amne/javascript/124496-tipsradsystem"
topic: "JavaScript"
topic_url: "https://www.webforum.nu/amne/javascript"
author: "asp"
published: "2005-03-16T17:25:41.000Z"
updated: "2005-03-20T13:02:51.000Z"
replies: 18
views: 592
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/javascript/124496-tipsradsystem"
---

# Tipsradsystem

## #1 — asp, 2005-03-16T17:25Z

Hej. Denna kod fungerar inte. Inget felmess heller.

```
<img src="off.gif" onclick="rad(1);" id="1">
<img src="off.gif" onclick="rad(2);" id="2">
<img src="off.gif" onclick="rad(3);" id="3">
```

```
<script>
function rad(id){
document.getElementById(id).src=(document.getElementById(id).src=="off.gif")? "on.gif":"off.gif";
};
</script>
```

Någon vänlig själ som vet?

Någon som har någon smartare lösnning på hur man kan utforma ett tipskopung?

Permalänk: https://www.webforum.nu/p/124496

## #2 — dectgap, 2005-03-16T17:28Z

Smart sätt att utforma en tipskupong?
Radio-knappar!

```
<input type="radio" name="m1" value="1">
<input type="radio" name="m1" value="x">
<input type="radio" name="m1" value="2">
```

En anledning till varför ditt skript inte fungerar kan vara att "1", "2" och "3" inte är giltiga idn. Ett id får inte börja på en siffra.

Permalänk: https://www.webforum.nu/p/1573651

## #3 — asp, 2005-03-17T09:23Z

Funka ej!

Jag vill använda bilder, mycket snyggare och dessutom skall man kunna halv resp hel gardera!

Permalänk: https://www.webforum.nu/p/1573870

## #4 — jawbreaker, 2005-03-17T09:59Z

Du bör nog som sagt inte använda enbart siffror som id:n på dina bilder...

```
<img src="off.gif" onclick="rad(this.id);" id="r1">
<img src="off.gif" onclick="rad(this.id);" id="r2">
<img src="off.gif" onclick="rad(this.id);" id="r3">
```

Och så tror jag inte att document.getElementById(id).src ger dig det svar du önskar, utan den innehåller nog en längre sökväg till bilden ifråga. Lite lurigt det där. Men man kan väl komma runt det på följande sätt:

```
<script>
function rad(id){
document.getElementById(id).src=(-1 != document.getElementById(id).src.indexOf("off.gif"))? "on.gif":"off.gif";
};
</script>
```

Permalänk: https://www.webforum.nu/p/1573885

## #5 — asp, 2005-03-17T15:30Z

Tack det fungerar. Har tyvärr stött på fler problem. Är helt fel ute när jag försöker ta reda på antal halv och helgarderingar och så varje match är ifylld. Kanske kan du hjälpa även här med om du har lust.

Jag har ju 39 bilder (13 matcher \* 3). När man klickat på "OK" så vill jag att en koll körs som kontrollerar så man inte har fler halv eller helgarderingar än vad man får samt att alla rader har minst 1 alternativ ikryssat.

Vet att det är mycket, men du verkar vara en riktig hajjare på detta!

Permalänk: https://www.webforum.nu/p/1574072

## #6 — jawbreaker, 2005-03-17T19:56Z

Posta gärna lite kod så man kan se vad du har än så länge. Och så får du gärna skriva ihop en liten beskrivning på vad det hela går ut på också. Jag förstår såklart att det handlar om stryktips, men jag har inte någon större koll på hur man egentligen spelar på stryktipset. Det var (för) länge sen jag tippade, så jag kan inte det här med hur många hel-/halvgarderingar man får ha på en kupong och så vidare.
Vad ska hända när man har fyllt i kupongen och tryckt på knappen förresten? Vill du bara skriva ut hur många hel- respektive halvgarderingar kupongen innehåller, samt totala antalet rader?

Som sagt, lite mer info - sen kan nog jag eller någon annan här på forumet hjälpa dig vidare.

Permalänk: https://www.webforum.nu/p/1574202

## #7 — asp, 2005-03-17T21:31Z

Kod kan jag tyvärr inte post då jag använder en annan dator för kodning som ej har internet uppkoppling.

Men såhär skall det gå till.

1\. Man kommer till en sida med 13 matcher. Man klickar för 1x2, bilderna ändras precis som scriptet du gjort ovan.

2\. Efter varje klick vill jag att en funktion körs så man ser hur många halv/hel garderingar man har.
Halvgarderingar: 8
Helgarderingar: 4

3\. När man klickar på spara vill jag att den kontrollerar så inte halvgarderingarna överstiger Y och helgarderingarna överstiger X.

4\. Om allt stämmer så skall den göra om all data till en sträng som skall se ut såhär:
1:X:12:X:2 o.s.v. ända till tretton stycken :

Alltså det betyder att första matchen är en etta, andra ett kryss, tredje 1 och 2.

Hoppas verkligen du förstår och har tid/lust att hjälpa!

Permalänk: https://www.webforum.nu/p/1574243

## #8 — jawbreaker, 2005-03-18T07:08Z

Inte helt komplett kod (och inte mycket testad), men en bit på vägen:

```
<html>
<head>
<title>Stryktipset</title>

<script language="javascript" type="text/javascript">
<!--

var g_isInitialized = false;
var g_arr = new Array();

function isChecked( p_r, p_c )
{
	return g_arr[p_r][p_c];
}

function toggle( p_r, p_c )
{
	if ( !g_isInitialized )
		return;

	var id = "r" + p_r + "c" + p_c;
	var ch = isChecked( p_r, p_c );
	g_arr[p_r][p_c] = !ch;
	document.getElementById( id ).src = ( ch ? "off.gif" : "on.gif" );
	updateStatus();
}

function getRows()
{
	var res = new Array();

	for ( var r = 0; r < 13; r++ )
	{
		res[r] = "";

		if ( isChecked( r, 0 ) )
			res[r] += "1";
		if ( isChecked( r, 1 ) )
			res[r] += "X";
		if ( isChecked( r, 2 ) )
			res[r] += "2";
	}

	return res;
}

function getStatus()
{
	var rows = getRows();

	var nHelgarderingar = 0;
	var nHalvgarderingar = 0;
	var nTommaRader = 0;

	for ( var i = 0; i < rows.length; i++ )
	{
		switch ( rows[i].length )
		{
		case 3:	nHelgarderingar++;
			break;
		case 2:	nHalvgarderingar++;
			break;
		case 0:	nTommaRader++;
			break;
		}
	}

	return ( new Array( nHelgarderingar, nHalvgarderingar, nTommaRader ) );
}

function updateStatus()
{
	var stat = getStatus();

	document.getElementById( "helgarderingar" ).innerHTML = stat[0];
	document.getElementById( "halvgarderingar" ).innerHTML = stat[1];
}

function validateRows()
{
	if ( !g_isInitialized )
		return false;

	var stat = getStatus();

	if ( 0 < stat[2] )
	{
		alert( "Du har inte valt något alternativ på alla rader." );
		return false;
	}
/*
	if ( MAXANTALHELGARDERINGAR < stat[0] )
	{
		alert( "Du har valt för många helgarderingar." );
		return false;
	}
	if ( MAXANTALHALVGARDERINGAR < stat[1] )
	{
		alert( "Du har valt för många halvgarderingar." );
		return false;
	}
*/

	return true;
}

function saveRows( p_form )
{
	if ( validateRows() )
	{
		var rows = getRows();
		var row = rows.join( ":" );

		p_form.row.value = row;
		//p_form.submit();
		alert( row );
	}
}

function doOnLoad()
{
	for ( var r = 0; r < 13; r++ )
	{
		g_arr[r] = [0,0,0];

		for ( var c = 0; c < 3; c++ )
		{
			var _img = document.getElementById( "r" + r + "c" + c );
			if ( _img && _img.src && -1 != _img.src.indexOf( "on.gif" ) )
				g_arr[r][c] = 1;
		}
	}

	g_isInitialized = true;
}

//-->
</script>

<style type="text/css">
<!--

body, td { font: 11px verdana, arial, helvetica, sans-serif; }

-->
</style>
</head>

<body onload="doOnLoad();">
<form action="">
<input type="hidden" name="row" value="">

<table border="0" cellspacing="0" cellpadding="2">
<tr>
 <td>_</td>
 <td align="center"><b>1</b></td>
 <td align="center"><b>X</b></td>
 <td align="center"><b>2</b></td>
</tr>
<tr>
 <td align="right"><b>1</b></td>
 <td><img id="r0c0" src="off.gif" onclick="toggle(0,0);"></td>
 <td><img id="r0c1" src="off.gif" onclick="toggle(0,1);"></td>
 <td><img id="r0c2" src="off.gif" onclick="toggle(0,2);"></td>
</tr>
<tr>
 <td align="right"><b>2</b></td>
 <td><img id="r1c0" src="off.gif" onclick="toggle(1,0);"></td>
 <td><img id="r1c1" src="off.gif" onclick="toggle(1,1);"></td>
 <td><img id="r1c2" src="off.gif" onclick="toggle(1,2);"></td>
</tr>
<tr>
 <td align="right"><b>3</b></td>
 <td><img id="r2c0" src="off.gif" onclick="toggle(2,0);"></td>
 <td><img id="r2c1" src="off.gif" onclick="toggle(2,1);"></td>
 <td><img id="r2c2" src="off.gif" onclick="toggle(2,2);"></td>
</tr>
<tr>
 <td align="right"><b>4</b></td>
 <td><img id="r3c0" src="off.gif" onclick="toggle(3,0);"></td>
 <td><img id="r3c1" src="off.gif" onclick="toggle(3,1);"></td>
 <td><img id="r3c2" src="off.gif" onclick="toggle(3,2);"></td>
</tr>
<tr>
 <td align="right"><b>5</b></td>
 <td><img id="r4c0" src="off.gif" onclick="toggle(4,0);"></td>
 <td><img id="r4c1" src="off.gif" onclick="toggle(4,1);"></td>
 <td><img id="r4c2" src="off.gif" onclick="toggle(4,2);"></td>
</tr>
<tr>
 <td align="right"><b>6</b></td>
 <td><img id="r5c0" src="off.gif" onclick="toggle(5,0);"></td>
 <td><img id="r5c1" src="off.gif" onclick="toggle(5,1);"></td>
 <td><img id="r5c2" src="off.gif" onclick="toggle(5,2);"></td>
</tr>
<tr>
 <td align="right"><b>7</b></td>
 <td><img id="r6c0" src="off.gif" onclick="toggle(6,0);"></td>
 <td><img id="r6c1" src="off.gif" onclick="toggle(6,1);"></td>
 <td><img id="r6c2" src="off.gif" onclick="toggle(6,2);"></td>
</tr>
<tr>
 <td align="right"><b>8</b></td>
 <td><img id="r7c0" src="off.gif" onclick="toggle(7,0);"></td>
 <td><img id="r7c1" src="off.gif" onclick="toggle(7,1);"></td>
 <td><img id="r7c2" src="off.gif" onclick="toggle(7,2);"></td>
</tr>
<tr>
 <td align="right"><b>9</b></td>
 <td><img id="r8c0" src="off.gif" onclick="toggle(8,0);"></td>
 <td><img id="r8c1" src="off.gif" onclick="toggle(8,1);"></td>
 <td><img id="r8c2" src="off.gif" onclick="toggle(8,2);"></td>
</tr>
<tr>
 <td align="right"><b>10</b></td>
 <td><img id="r9c0" src="off.gif" onclick="toggle(9,0);"></td>
 <td><img id="r9c1" src="off.gif" onclick="toggle(9,1);"></td>
 <td><img id="r9c2" src="off.gif" onclick="toggle(9,2);"></td>
</tr>
<tr>
 <td align="right"><b>11</b></td>
 <td><img id="r10c0" src="off.gif" onclick="toggle(10,0);"></td>
 <td><img id="r10c1" src="off.gif" onclick="toggle(10,1);"></td>
 <td><img id="r10c2" src="off.gif" onclick="toggle(10,2);"></td>
</tr>
<tr>
 <td align="right"><b>12</b></td>
 <td><img id="r11c0" src="off.gif" onclick="toggle(11,0);"></td>
 <td><img id="r11c1" src="off.gif" onclick="toggle(11,1);"></td>
 <td><img id="r11c2" src="off.gif" onclick="toggle(11,2);"></td>
</tr>
<tr>
 <td align="right"><b>13</b></td>
 <td><img id="r12c0" src="off.gif" onclick="toggle(12,0);"></td>
 <td><img id="r12c1" src="off.gif" onclick="toggle(12,1);"></td>
 <td><img id="r12c2" src="off.gif" onclick="toggle(12,2);"></td>
</tr>
</table>
<br>
Halvgarderingar: <span id="halvgarderingar">0</span><br>
Helgarderingar: <span id="helgarderingar">0</span><br>
<br>
<input type="button" value="Spara" onclick="saveRows( this.form );">
</form>
</body>
</html>
```

Permalänk: https://www.webforum.nu/p/1574307

## #9 — asp, 2005-03-18T07:59Z

Alltså det är ju helt sjukt!! Det stämde!! Allt fungerade!! Tusen tack till mästaren!

Permalänk: https://www.webforum.nu/p/1574337

## #10 — asp, 2005-03-18T10:43Z

Två frågor.

1\. Det blir fel när den skall spara raden. I denna kod tar jag bort sista raden, men då skickar den till spara.asp oavsett om det är fler halvgarderingar. 

```
		p_form.row.value = row;
		//p_form.submit();
		alert( row );
```

2\. Om bilderna redan är on.gif, så räknas den inte som ifylld, går det att ordna eftersom man även skall kunna spara rader man gjort innan.

Permalänk: https://www.webforum.nu/p/1574400

## #11 — jawbreaker, 2005-03-18T12:49Z

Jag har ändrat i koden i mitt tidigare inlägg, så ta och kopiera den igen. Den är främst ändrad för att fixa till det du skrev i punkt 2.
Ang. punkt 1 så vet jag inte om jag är med på riktigt vad du menar. Koden kollar just nu inte alls om det är "för många" hel- eller halvgarderingar nämligen. Jag förberedde lite kod för det i funktionen validateRows(), men den koden är ju bortkommenterad (för att jag inte har någon aning om hur många garderingar man får ha på en kupong).

Permalänk: https://www.webforum.nu/p/1574471

## #12 — asp, 2005-03-18T13:16Z

Alltså, just nu är bilderna off.gif från början. Men ibland kommer vissa bilder vara on.gif men de  räknas fortfarande som off.gif eftersom man inte klickat sig fram till on.gif... förstår du?

Permalänk: https://www.webforum.nu/p/1574508

## #13 — asp, 2005-03-18T13:24Z

Jag ser att du löst det med koden, fast "submiten" fungerar fortfarande inte. :(

Permalänk: https://www.webforum.nu/p/1574518

## #14 — jawbreaker, 2005-03-18T13:36Z

Vad är det som blir fel när du försöker spara då? Det är lite svårt att gissa eftersom jag inte vet exakt hur din kod ser ut...

Permalänk: https://www.webforum.nu/p/1574530

## #15 — asp, 2005-03-18T16:31Z

När man klickar på submit knappen så skickas det iväg oavsett om en alert ruta kommit innan eller inte. Kan det bero på att jag har döpt om den till submit istället för button ?

Permalänk: https://www.webforum.nu/p/1574637

## #16 — jawbreaker, 2005-03-18T17:52Z

Du menar att knappen är av typen submit nu istället för button? I så fall så skickas alltid formuläret, ja. Men varför inte låta den vara av typen button? Formuläret skickas ju med javascript i funktionen saveRows():

```
function saveRows( p_form )
{
	if ( validateRows() )
	{
		var rows = getRows();
		var row = rows.join( ":" );

		p_form.row.value = row;
		p_form.submit();
	}
}
```

Generellt sett är det egentligen snyggare att använda submit-knappar ihop med formulär istället för att posta formuläret med javascript - det finns ju de som inte har javascript aktiverat. Men i det här fallet ser jag ingen direkt fördel med att ha en submit-knapp framför en "vanlig" knapp. Allt är ju så beroende av att man har javascript aktiverat här i alla fall. Alltihop bygger ju på det så att säga...

Permalänk: https://www.webforum.nu/p/1574675

## #17 — asp, 2005-03-20T12:02Z

Nu fungerar det.

Dock finns det en bugg kvar. När man laddar en frädig rad så laddas inte halv/helgarderingarna. Utan de står på 0 och när man klickar på en ruta så ändras dem till kanske 3 och 2.

Sedan undrar jag om det går att skriva onLoad="doOnLoad();" någon annanstans eftersom jag inkludar sidor och har själva html/body på en mall...

Permalänk: https://www.webforum.nu/p/1575178

## #18 — asp, 2005-03-20T12:38Z

Jag ordnadet med halv/hel garderingarna, men är det korrekt?

Jag skrev under g_isInitialized = true; **updateStatus();** i function doOnLoad... Är det korrekt?

Har inte löst det med onload=""....

Permalänk: https://www.webforum.nu/p/1575190

## #19 — jawbreaker, 2005-03-20T13:02Z

Det är alldeles korrekt att updateStatus() måste köras för att antalet garderingar ska visas korrekt när sidan laddas - och det löste du själv, för du har gjort helt rätt nämligen.
Funktionen doOnLoad() måste köras efter att html-koden för själva "kupongen" visats, men den behöver inte nödvändigtvis vara ett onload-event. Om du har möjlighet att göra på följande sätt ska det fungera:

```
...
<tr>
 <td align="right"><b>13</b></td>
 <td><img id="r12c0" src="off.gif" onclick="toggle(12,0);"></td>
 <td><img id="r12c1" src="off.gif" onclick="toggle(12,1);"></td>
 <td><img id="r12c2" src="off.gif" onclick="toggle(12,2);"></td>
</tr>
</table>
<br>
Halvgarderingar: <span id="halvgarderingar">0</span><br>
Helgarderingar: <span id="helgarderingar">0</span><br>
<br>
<input type="button" value="Spara" onclick="saveRows( this.form );">
<script>doOnLoad();</script>
...
```

Permalänk: https://www.webforum.nu/p/1575200

---

Tråden på webben: https://www.webforum.nu/amne/javascript/124496-tipsradsystem