Mehr Textfelder für Farbauswahl

Ich habe diesen Code unten im inet gefunden. Dieser ist aber nur für 1 Textfeld. Ich möchte aber 2 Textfelder damit benutzen. Wie kann ich das machen.

[code]


HEX:

R: <input type="text" name="rValue" id="rValue" size="3">
G: <input type="text" name="gValue" id="gValue" size="3">
B: <input type="text" name="bValue" id="gValue" size="3"> </p>
</form>

[/code]

Kann mir niemand helfen?

hab jetzt gleich mittagspause ende, aber such doch mal die stelle wo angegeben ist auf welches textefeld es angewendet wird, und dann versuchst du es auf das zweite zu übertragen.
mfg

Sry, aber Javascript ist nicht mein Gebiet. Hätte zwar die Stelle gefunden, aber wie kann ich jetzt auf 2 Textfelder übertragen?

Kann mir keiner Helfen?

nanu? eine offene Frage? Passt doch nicht zu bplaced :S

Was soll das Script denn können? mehrere Felder zum ausgeben der Farben?

Also es sollen 3 solche Farben “Tabellen” zum auswählen sein. Also 3 Textfelder

So hab mich mal daran gesetzt und ein bisschen gebastelt.
Ich bin zwar kein JavaScript Profi und musste deshalb selber noch ne Menge googlen, denke aber, dass sich damit leben lässt…

Das ergebniss ist nicht ganz das gleiche wie die Version oben, da ich auf einiges verzichtet hab, wenn mit den Textfeldern noch etwas bestimmtes gemacht werden soll, muss das halt noch hinzugefügt werden.

Meine Variante ist etwas mehr “Objektorientiert”, auch wenn man das bei JavaScript wohl nicht unbedingt behaupten kann…

Jedenfalls ist das hinzufügen von solchen Farbtabellen jetzt recht einfach gehalten.

Edit: btw. ich hab die ganzen kommentare entfernt, und damit auch die Copyright schriften, die sollte man vielleicht wieder einfügen, da ich doch einiges vom Original übernommen hab

Edit 2: Nur in Firefox 3 getestet

Hier der Code mit zwei Beispielen am Ende, wie man das einzufügen hat




<script language="JavaScript">


var colors = new Array();
var hh = new Array();

hh[0] = "00";
hh[1] = "33";
hh[2] = "66";
hh[3] = "99";
hh[4] = "cc";
hh[5] = "ff";
var i = 0;

for(var n1 = 0; n1 <= 5; n1++){
	for(var n2 = 0; n2 <= 5; n2++){
		for(var n3 = 0; n3 <= 5; n3++){
			colors[i] = "#" + hh[n1] + hh[n2] + hh[n3];
			i++;
		}
	}
}

colors[i] = '#333333'; i++;
colors[i] = '#666666'; i++;
colors[i] = '#999999'; i++;
colors[i] = '#cccccc'; i++;



function FarbTabelle(objName){
	this.objName = objName;
	this.hexField = objName + '_hexField';
	this.rField = objName + '_rField';
	this.gField = objName + '_gField';
	this.bField = objName + '_bField';
	this.Preview = objName + '_Preview';
	
	document.write('<table cols="36" border="0" cellpadding="0" cellspacing="0"><tr>');
	
	for(var n = 0; n < colors.length; n++){
		mod = n % 36;
		if(n > 0 && mod == 0){
			document.write('</tr><tr>');
		}
		document.write('<td style="background-color:' + colors[n] + '; width:10px; height:10px;" onclick="' + this.objName + '.Highlight(this, ' + n + ')"></td>');
	}
	document.write('</tr></table>');
	this.CreateForm = CreateForm;
	this.Highlight = Highlight;
}

function CreateForm(){
	document.write('<form>');
	document.write('<div style="height:20px; width:200px; margin:0 auto 0 auto;" id="' + this.Preview + '"></div>');
	document.write('<p align="center" class="tabueb">HEX: <input type="text" id="' + this.hexField + '" value="#" size="20">');
	document.write('R: <input type="text" id="' + this.rField + '" size="3">');
	document.write('G: <input type="text" id="' + this.gField + '" size="3">');
	document.write('B: <input type="text" id="' + this.bField + '" size="3"> </p>');
	document.write('</form>');
}

function Highlight(Element, colindex){
	document.getElementById(this.Preview).style.backgroundColor = colors[colindex];
	document.getElementById(this.hexField).value = colors[colindex];
	
	document.getElementById(this.rField).value = parseInt((cutHex(colors[colindex])).substring(0,2),16);
	document.getElementById(this.gField).value = parseInt((cutHex(colors[colindex])).substring(2,4),16);
	document.getElementById(this.bField).value = parseInt((cutHex(colors[colindex])).substring(4,6),16);
}

function cutHex(h) {
	return (h.charAt(0)=="#") ? h.substring(1,7) : h
}

    </script>

<!-- Beispiel 1 -->
<center>
	<table border="0" cellpadding="5" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="50%" id="AutoNumber1">
		<tr>
			<td width="100%"><p align="center" class="center">
				<script language="JavaScript">
					
					Tbl1 = new FarbTabelle('Tbl1');
					Tbl1.CreateForm();
				</script>
			</td>
		</tr>
	</table>
</center>



<!-- Beispiel 2 -->
<center>
	<table border="0" cellpadding="5" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="50%" id="AutoNumber1">
		<tr>
			<td width="100%"><p align="center" class="center">
				<script language="JavaScript">
					
					Tbl2 = new FarbTabelle('Tbl2');
					Tbl2.CreateForm();
				</script>
			</td>
		</tr>
	</table>
</center>

das einzige was beachtet werden muss, ist dass der name “Tbl1” an drei stellen in “Tbl2” geändert wurde.

ich hoffe das hilft schonmal

mfg Balmung