Hur använder man en funktion på 20 input's utan ID tag?

8 svar · 326 visningar · startad av Danielkun 31 juli 2006

DanielkunMedlem sedan maj 2003361 inlägg

Frågan31 juli 2006 07:52#1

Jag har skrivit ett Javascript som ändrar bakgrundsfärgen på input rutan i ett formulär beroende på vilken bokstav som står där. (Tex. Skriver man "A" i en ruta blir bakgrundsfärgen röd..)

Jag vill använda scriptet på 20 st input boxar och det skapar ett problem eftersom jag bara kan ha ett ID. (Och jag vill inte kopiera upp koden 20 ggr)

Finns det någon bra lösning?

<html>
<head>

<script language="JavaScript">
<!--
function daniel(ivalue){
if(ivalue=="A" || ivalue=="a"){ the_form.BG.className='A'; }
if(ivalue=="B" || ivalue=="b"){ the_form.BG.className='B'; }
if(ivalue=="C" || ivalue=="c"){ the_form.BG.className='C'; }
}
//-->
</script>

<style type="text/css">
input.A { background-color: #FF0000; }
input.B { background-color: #00FFCC; }
input.C { background-color: #0000FF; }
</style>

</head>
<body>

		
<form name="the_form">
	<p><input type="text" name="T1" size="20" onchange="daniel(this.value)" ID="BG"></p>
</form>

</body>
</html>

@ndersMedlem sedan juni 200032 967 inlägg

31 juli 2006 07:56#2

Ha olika id:n, och skicka med id till funktionen med det vettiga namnet daniel.

Edit: varför kan du bara ha ett id? Flera element får inte ha samma id.

DanielkunMedlem sedan maj 2003361 inlägg

31 juli 2006 08:22#3

Tack!

Jag kan ha flera ID'n. Jag ville bara inte ge ett unikt ID till varje input och sen kopiera upp koden till varje input. Visste inte att man kunde skicka med ID't till funktionen. Ska undersöka dettta.

Tänkte eventellt om det fanns ett lättare sätt att lösa det på med.

@ndersMedlem sedan juni 200032 967 inlägg

31 juli 2006 08:25#4

function daniel(ivalue,objid){

document.getElementById(objid).className='A';

<input type="text" name="T1" size="20" onchange="daniel(this.value, 'BG')" ID="BG">

DanielkunMedlem sedan maj 2003361 inlägg

31 juli 2006 08:32#5

Tack så mcyket!!

Funkar perfekt!

DanielkunMedlem sedan maj 2003361 inlägg

31 juli 2006 08:51#6

Hm.. hur får jag den att funka med flera färger?
Det ska blir olika färger beroende på vilken bokstav som matas in.. testade att skriva om koden lite men jag får det inte att funka.

La till en loop i koden nu som ger unikt nummer till varje input.

Tack för hjälpen!

@ndersMedlem sedan juni 200032 967 inlägg

31 juli 2006 08:52#7

Hur ser den ut då, när den inte fungerar?

DanielkunMedlem sedan maj 2003361 inlägg

31 juli 2006 13:11#8

Oj, en miss från min sida. Den funkade perfekt. Förlåt..
Tack än en gång!!

Här är koden som fungerar!

<html>
<head>

<script language="JavaScript">
<!--
function daniel(ivalue,objid){
if(ivalue=="A" || ivalue=="a"){ document.getElementById(objid).className='A'; }
if(ivalue=="B" || ivalue=="b"){ document.getElementById(objid).className='B'; }
if(ivalue=="C" || ivalue=="c"){ document.getElementById(objid).className='C'; }
}
//-->
</script>

<style type="text/css">
input.A { background-color: #FF0000; }
input.B { background-color: #00FFCC; }
input.C { background-color: #0000FF; }
</style>

</head>
<body>

<form name="the_form">
	<p><input type="text" name="T1" size="20" onchange="daniel(this.value, '1')" ID="1"></p>
</form>

</body>
</html>

DanielkunMedlem sedan maj 2003361 inlägg

1 aug. 2006 06:32#9

En fråga till!
Jag skulle vilja att markören "auto tabbar" sig vidare efter att man skrivit in en bokstav i en input. Jag hitta ett script men jag lyckas inte få den funka så bra med scriptet ovan. Finns det nån som kan hjälpa mig lite eller ge mig en start?
Jag vill inte använda mig av "NAME" . Däremot går ID eller något annat bra..

<html>
<head>

<script language="JavaScript">
<!--
function autotab(original,destination){
if (original.getAttribute&&original.value.length==original.getAttribute("maxlength"))
destination.focus()
}
//-->
</script>

</head>
<body>

<form name="sampleform">
<input type="text" name="Nr0" size=1 onKeyup="autotab(this, document.sampleform.Nr1)" maxlength=1>
<input type="text" name="Nr1" size=1 onKeyup="autotab(this, document.sampleform.Nr2)" maxlength=1>

</form>

</body>
</html>