Notifikationer

Markér alle som læst Log ud

prebenrunge Nybegynder

18. september 2008 - 19:38 Der er 5 kommentarer og
1 løsning

findes der Knapper der opfører sig som radiobuttom

Jeg har brug for nogle knapper (nok 8stk) i en form der opfører sig på samme måde som radiobuttom (altså kun een aktiv ad gangen).
Knapperne skal have forskellige tekster som almindelige submit knapper og jeg vil bruge onclick=ShowDetajl(this).
Om det er standard knapper, eller nogle jeg selv skal lave (img) er egentlig ikke vigtig - bare det nemmeste og mest flexible.

Problemet er at jeg vil have dem til at skifte form eller farve, så man kan se hvilken er aktiv (evt. rød tekst). Når en af de andre knapper så klikkes, skal den være aktiv og den anden skife om til 'normal'. I forbindelse med en knap er aktiv skal den selvfølge kalde mit script med onclick=ShowDetajl(this).

Synes godt om

kalp Novice

18. september 2008 - 20:26 #1

nu har jeg bare lige hurtig skrevet noget, men du kan selv forbedre det.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>kalp</TITLE>

<style>
.Selected {
border: red 1px solid;
}
.Deselected {}
</style>
</HEAD>
<script type="text/javascript">
function selectButton(element){
var elements = document.getElementById('Group').childNodes;
for(var i = 0; i < elements.length; i++){
if(elements[i].className != null)
elements[i].className = 'Deselected';
}
element.className = 'Selected';
}
</script>

<BODY>
<div id="Group">
<input class="Deselected" type="button" onclick="selectButton(this);" id="1" value="1" />
<input class="Deselected" type="button" onclick="selectButton(this);" id="2" value="2" />
<input class="Deselected" type="button" onclick="selectButton(this);" id="3" value="3" />
<input class="Deselected" type="button" onclick="selectButton(this);" id="4" value="4" />
</div>
</BODY>
</HTML>

Synes godt om

prebenrunge Nybegynder

18. september 2008 - 22:13 #2

Smukt - jeg klare resten. tak for hjælpen

Synes godt om

roenving Novice

19. september 2008 - 11:42 #3

-- bortset fra, at klasseskift on-the-fly ikke kan anbefales (og når man alligevel bruger funktioner er det jo simpelt nok !-)

<style>
.Selected {
border: red 1px solid;
}
.Deselected {border: 1px solid grey;}
</style>

<script type="text/javascript">
function selectButton(element){
var elements = document.getElementById('Group').childNodes;
for(var i = 0; i < elements.length; i++){
elements[i].style.borderColor = "grey";
}
element.style.borderColor = "red";
}
</script>

Synes godt om

prebenrunge Nybegynder

19. september 2008 - 18:05 #4

jeg har prøvet det og det virker fint, men knapperne er ikke så flotte.
HVIS jeg nu valgte at laver mine knapper selv (img1 eller 1, img2 eller 2 osv.)
og ønskede at udskifte dem med (img11 eller 11, img 21 eller 21 osv.)
altså så knap har 2 udgaver (1 og 11) og næste (2 og 21).
Hvordan ville scriptet så se ud (jeg formoder at det ikke helt er det samme ??

Synes godt om

roenving Novice

20. september 2008 - 12:30 #5

-- og så var der i øvrigt også lige et andet issue, nemlig at Group-div'en har andre childNodes i nogle browsere, så man skal bruge .getElementsByTagName("input") i stedet for .childNodes !-)

Men f.eks. udskifte billeder sådan:

<script type="text/javascript">
function selectButton(element){
var elements = element.parentNode.getElementsByTagName("input");
for(var i = 0; i < elements.length; i++){
elements[i].setAttribute("src","img" + elements[i].getAttribute("value") + ".gif");
}
element.setAttribute("src","img" + elements[i].getAttribute("value") + "1.gif");
}
</script>

<div id="Group">
<input type="image" src="img1.gif" onclick="selectButton(this);return false;" value="1">
<input type="image" src="img2.gif" onclick="selectButton(this);return false;" value="2">
<input type="image" src="img3.gif" onclick="selectButton(this);return false;" value="3">
<input type="image" src="img4.gif" onclick="selectButton(this);return false;" value="4">
</div>

-- og hov, de viste knapper har da ugyldige id'er, da den slags ikke må starte med andet end a-z og _ ...

-- og så kunne vi ligesågodt gøre os uafhængige af et tilfældigt id, da det jo er en parentNode, der indeholder alle elementerne !o]

Synes godt om

kalp Novice

21. september 2008 - 10:37 #6

Min kode bør vidst virke i øvrige browsere også (eller skal vi sige mit eksempel:) )

if(elements[i].className != null)

bør være null for øvrige elementer som andre browsere evt. sætter ind i en div.

men ellers er det netop forbedret kode du presentere så det er kun godt.
som jeg skriver selv var det hurtigt skrevet kode til inspiration, men skulle forbedres af spørger selv:-) - eller en anden:)

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript	0	I dag 20:09	-
Validering af filnavn i formular Af Strawberry i JavaScript	8	14/04/202610:11	20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript	2	03/02/202614:19	04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript	9	18/04/202516:52	22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript	2	14/02/202511:47	27/06/202514:34

Se alle spørgsmål i kategorien Opret spørgsmål

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

Alle kategorier på Eksperten

Seneste artiklerRSS