bugün ki ödevim 2 ve 3. maddeler.
2-) ilk butonun üstünden seçtiğimiz renk ilk butonun ve h1 in yazı rengini değiştirecek.
3-)buton ikinin solundan seçtiğimiz renk buton2 nin ve h1 in arkaplan rengini değiştirecek.
burun kodlar===> kırmızı ile yazılı kodlar 2 ve 3. buton için eklediğim kodlar.
<script type="text/javascript">
$(document).ready(function(){
$('#tikla').click(function(){
$( this ).css("color","white");
$(this).css("background-color","green");
$(this).css("font","35px");
$( "#isim").css("color","black");
$( "#isim").css("background-color","pink");
$( "#isim").css("font","35px");
});
$("#tb1").click(function () { $("#button1").css("color",$(this).val());//"$(this).val()" menü degerini göstermemizi saglar...
});
$("#tb2").click(function () { $("#button2").css("background",$(this).val());//"$(this).val()" menü degerini göstermemizi saglar...
});
$('#button1').click(function(){
$("#button1").css("color",$('select').val());
$("#isim").css("color",$('select').val());
});
$('#button2').click(function(){
$("#button2").css("background",$('select').val());
$("#isim").css("background",$('select').val());
});
});
</script>
</head>
<body>
<input id="tikla" type="button" value="tikla" /><br>
<h1 id="isim">Gülseher</h1>
<select id="tb1">
<option value="red">Kirmizi</option>
<option value="blue">Mavi</option>
<option value="grey">Gri</option>
<option value="green">Yesil</option>
<option value="orange">Turuncu</option>
</select><br><br>
<button id="button1">Ilk buton</button> <br><br>
<select id="tb2">
<option selected="selected">SARI</option>
<option selected="selected">KIRMIZI</option>
<option selected="selected">YESIL</option>
<option selected="selected">TURUNCU</option>
</select>
<button id="button2">buton2</button><br></body>
burun kodlar===> kırmızı ile yazılı kodlar 2 ve 3. buton için eklediğim kodlar.
<script type="text/javascript">
$(document).ready(function(){
$('#tikla').click(function(){
$( this ).css("color","white");
$(this).css("background-color","green");
$(this).css("font","35px");
$( "#isim").css("color","black");
$( "#isim").css("background-color","pink");
$( "#isim").css("font","35px");
});
$("#tb1").click(function () { $("#button1").css("color",$(this).val());//"$(this).val()" menü degerini göstermemizi saglar...
});
$("#tb2").click(function () { $("#button2").css("background",$(this).val());//"$(this).val()" menü degerini göstermemizi saglar...
});
$('#button1').click(function(){
$("#button1").css("color",$('select').val());
$("#isim").css("color",$('select').val());
});
$('#button2').click(function(){
$("#button2").css("background",$('select').val());
$("#isim").css("background",$('select').val());
});
});
</script>
</head>
<body>
<input id="tikla" type="button" value="tikla" /><br>
<h1 id="isim">Gülseher</h1>
<select id="tb1">
<option value="red">Kirmizi</option>
<option value="blue">Mavi</option>
<option value="grey">Gri</option>
<option value="green">Yesil</option>
<option value="orange">Turuncu</option>
</select><br><br>
<button id="button1">Ilk buton</button> <br><br>
<select id="tb2">
<option selected="selected">SARI</option>
<option selected="selected">KIRMIZI</option>
<option selected="selected">YESIL</option>
<option selected="selected">TURUNCU</option>
</select>
<button id="button2">buton2</button><br></body>
Hiç yorum yok:
Yorum Gönder