Alina: Farbe einer Figur ändern durch Farbeingabe in Eingabefenster

Beitrag lesen

SELF-Forum

Farbe einer Figur ändern durch Farbeingabe in Eingabefenster

Alina (Versionen)
– Informationen zu den Bewertungsregeln

Danke sehr für den Post :-), nach so einer ähnlicher bin der Zeit auf der Suche :-(

ich bin auf der Suche nach einer Funktion und werde nicht findig.

ich hoffe nur, dass Sie mir weiter helfen können.

Problem:

ich habe 2 Figuren, rect 1 und rect 2

und 2 Suchfenster, Suchfenster 1 und Suchfenster 2

wenn man im Suchfenster 1 farbe eingibt, zb. rot, dann soll das rect 1 rot werden.

wenn man im Suchfenster 2 farbe eingibt, zb. blau, dann soll das rect 2 blau werden.

rect 1 und rect 2 sind Figuren aus svg, die in html eingebunden wurden.

Ich werde Ihnen sehr dankbar sein, wenn Sie helfen, such seit 2 Tagen schon nach einer Lösung.

<!doctype html>
<html>
<head>
  <title>Simka</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  <!-- Simka Überschrift-->


<h1>   Simka      </h1>
<style>
    h1 { 
       background-color: green;
       color: white;
    }
    p {
    	text-align: center; 
    	color: green;
    }
    </style>
	
	<!-- Darstellung von Suchfunktion Grundfarbe-->

	
<main>

	<form action="1" >
		<p>
			<label> Grundfarbe
				<input type="search" list="Grundfarbe" />
				<datalist id="Grundfarbe">
					<option value="RAL 3000">  <!-- rot-->
						<option value="RAL 3001">
							<option value="RAL 3002">
								<option value="RAL 3003">
									<option value="RAL 3004">
										<option value="RAL 3005">
											<option value="RAL 3006">
												<option value="RAL 3007">
													<option value="RAL 3008">
				</datalist>
			</label>
			<button>ok</button>
		</p>
	</form>
	
	
	
	
<!--Stoßstange Hinten-->

<form action="2" >

		<p>
			<label> StoßstangeH
				<input type="StoßstangeH" list="Stoßstange Hinten" />
				<datalist id="StoßstangeH">
					<option value="RAL 3000">
						<option value="RAL 3001">
							<option value="RAL 3002">
								<option value="RAL 3003">
									<option value="RAL 3004">
										<option value="RAL 3005">
											<option value="RAL 3006">
												<option value="RAL 3007">
													<option value="RAL 3008">
				</datalist>
			</label>
			<button>ok</button>
		</p>
	</form>

</main>

</head>
 
<body>
 
  
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 1190.6 841.9" style="enable-background:new 0 0 1190.6 841.9;" xml:space="preserve">

 <style type="text/css">
 
	
	<!--rot-->
	.farbe1{fill:#FF0000;}
	<!--blau-->
	.farbe2{fill:#0101DF;}
	
	
</style>




	<!--Grundfarbe rot-->

	<rect x="17" y="31.8" class="farbe1" width="40" height="26"/>
	
	<!--Farbe blau-->

	<rect x="2" y="80" class="farbe2" width="60.3" height="30"/>
	
	



</svg>

  </svg>
</body>
</html>

LG

Beitrag melden
–
Informationen zu den Bewertungsregeln