Zmiana Koloru Tekstu/Tła Jquery

Dla specjalistów Webmastering
#1

Witam, mam taki kod :

 

<!DOCTYPE html>

<html>

<head>

  <meta http-equiv=“content-type” content=“text/html; charset=UTF-8”>

  <title> Kolory JQUERY</title>

  

  <script type=‘text/javascript’ src=’//code.jquery.com/jquery-2.1.0.js’></script>

    

  <style type=‘text/css’>

    textarea { border: 1pxsolid gray; }

div { border: 1px solid #ccc; background: #fcfcfc; width: 500px; height: 350px; }

  </style>

  

 

 

<script type=‘text/javascript’>//<![CDATA[ 

 

$(document).ready(function(){

    $("#editor").keyup(function(){

        $("#results").html($(this).val());

    });

    // Zmienic tak ponizsza funkcje aby po zmianie wartosci pol nastapila zmiana koloru tekstu lub tla

    $("#zmien").click(function(){

        var bg = $("#kolor_tla").val();

        var col = $("#kolor_tekstu").val();

        $(this).css(“color”, “black”)

        $("#results").css(“background”,bg).css(“color”, col;

 

    });

});

//]]>  

 

</script>

 

 

</head>

<body>

  Atrybut: <select id=“atrybut”>

    <option value=“background”>Tło</option>

    <option value=“color”>Kolor tekstu</option>

</select> 

Kolor tekstu: <select id=“kolor_tekstu”>

    <option value=“white”>Biały</option>

    <option value=“black”>Czarny</option>

    <option value=“orange”>Pomarańczowy</option>

    <option value=“green”>Zielony</option>

</select>

<button id=“zmien”>Zmień kolor</button>

<br /><textarea id="zmien

" cols=“60” rows=“10”></textarea> 

<div id=“results”></div>

  

</body>

 

 

</html>

 

 

 

 

I musze zrobic aby bo wybraniu atrybutu (np. Tło) wybraniu koloru (tego tła) i naciśnieciu “zmien kolor” sie zmieniło. Potrzebuje szybkiej pomocy :d

#2

Nie powinieneś używac zdarzenia click tylko change

A jak wstawić wartość z form do zmiennej masz w pierwszym rozdziale kazdego kursu jquery/js …

#3

Dobrze by było, gdybyś opakował sobie to w jakiś formularz, wtedy wyzwalaczem akcji byłoby wysłanie formularza. W obecnej formie powinno to wyglądać mniej więcej tak:

$("#zmien").click(function(){
	
	var color = $("kolor_tekstu").val();
	
	if ($("#atrybut").val() === "background"){
		$(this).css("background",color);
	}
	else {
		$(this).css("color",color);
	}
	
});

Dodatkowo chciałem zauważyć, że masz dwa elementy o tym samym ID. Powyższy kod będzie zmieniał Ci kolory na przycisku (o ile zadziała przez ten zdublowany identyfikator).