Html5 Renk Seçiçi Tablo Problemi
-
hocalar yarına getiştirmem gereken bi proje varda neresinde hata yaptıgımı bilmiyorum normalde renklerin olduğu tablo gelmesi lazım gelmedi bilen gören anlayan bi yardım edebilir mi kaydırma cubukları falan hersey tamam bi tek renk tablosu çıkmadı
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>type="color"</title>
<script type ="text/css">
form
{
width: 400px;
position: relative;
}
form tr td:nth-of-type(1)
{
width: 150px;
color: crimson;
font-family: "Gill Sans MT Condensed";
font-size: 20px;
}
div#renk
{
width: 100px;
height: 118px;
position: absolute;
right: -100px;
top: 10px;
}
p#result
{
font-family: consolas;
font-size: 15px;
color: #11b0ee;
font-weight: bold;
}
</style>
<script type="text/javascript">
var ch= function () {
var hsl = document.querySelector("input[name'hue']");
var saturation = document.querySelector("input[name'saturation']");
var light = document.querySelector("input[name'light']");
var target = document.getElementById("renk");
var colorStr="hsl("+hsl.value+"," + saturation.value + "%," + light.value+ "%)";
target.style.backgroundColor = colorStr;
var sonucYaz= document.getElementById("result");
sonucYaz.innerHTML = colorStr;
var style = document.defaultView.getComputedStyle(target, null);
sonucYaz.innerHTML += " ,hex:" + style.getPropertValue("background-color");
}
</script></head>
<body>
<form action="" name="form1">
<fieldset>
<legend>Renk Seçiçi</legend>
<table>
<tr>
<td>Hue (Renk)</td>
<td>
<input type="range" name="hue" min="0" max="360"
step="1" onformchange="ch();" />
360<sup>0</sub>
</td>
</tr>
<tr>
<td>Saturation(Doygunluk)</td>
<td>
<input type="range" name="saturation" min="0" max="100"
step="1" onformchange="ch();" />
100%
</td>
</tr>
<tr>
<td>lightness(Aydınlık)</td>
<td>
<input type="range" name"light" min="0" max="100"
step="1" onformchange="ch();" />
%100
</td>
</tr>
</table>
<p if="result"></p>
</fieldset>
<div id="renk">
</div>
</form>
</body>
</html> -
1. hata : css kısmını style değilde script diye başlatmışsın
Cosmic tarafından 28/Kas/14 00:50 tarihinde düzenlenmiştir
2. hata : range inputlara onformchange eventi vermişsin. böyle bir event duymadım sen onları onmousemove yap.
3. hata : en alttaki inputun isminde = koymayı unutmuşsun.
4. hata : query selectorlerde name lerden sonra = koyman gerek name='hue' şeklinde -
Cosmic bunu yazdı
1. hata : css kısmını style değilde script diye başlatmışsın
2. hata : range inputlara onformchange eventi vermişsin. böyle bir event duymadım sen onları onmousemove yap.
3. hata : en alttaki inputun isminde = koymayı unutmuşsun.
4. hata : query selectorlerde name lerden sonra = koyman gerek name='hue' şeklindehocam cok teşekür ederim dediklerini tapınca bi boka benzedi ama hala renk tablom gelmedi :S
-
renk tablosu dediğin scrolları kaydırınca yanda çıkan renk şeysi değilmi? dediklerimi yaptığında o çıkıyor. en son yaptığın kodu paylaş bir eksik yapmışsındır mutlaka
-
buyur hacı tamamlanmış hali. çok ilginç hatalar vardı :D
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title> color picker </title> <style> form { width: 400px; position: relative; } form tr td:nth-of-type(1) { width: 150px; color: crimson; font-family: "Gill Sans MT Condensed"; font-size: 20px; } div#renk { width: 100px; height: 118px; position: absolute; right: -100px; top: 10px; } p#result { font-family: consolas; font-size: 15px; color: #11b0ee; font-weight: bold; } </style> <script type="text/javascript"> function ch() { var hsl = document.querySelector("input[name='hue']"); var saturation = document.querySelector("input[name='saturation']"); var light = document.querySelector("input[name='light']"); var target = document.getElementById("renk"); var colorStr="hsl("+hsl.value+"," + saturation.value + "%," + light.value+ "%)"; target.style.backgroundColor = colorStr; var sonucYaz= document.getElementById("result"); sonucYaz.innerHTML = colorStr; var style = document.defaultView.getComputedStyle(target, null); sonucYaz.innerHTML += " hex:" + style.getPropertyValue("background-color"); } </script> </head> <body> <form action="" name="form1"> <fieldset> <legend>Renk Seçiçi</legend> <table> <tr> <td>Hue (Renk)</td> <td> <input type="range" name="hue" min="0" max="360"step="1" onclick="javascript:ch();" />360<sup>0</sup> </td> </tr> <tr> <td>Saturation(Doygunluk)</td> <td> <input type="range" name="saturation" min="0" max="100" step="1" onclick="ch();" /> 100% </td> </tr> <tr> <td>lightness(Aydınlık)</td> <td> <input type="range" name="light" min="0" max="100" step="1" onclick="ch();" /> %100 </td> </tr> </table> <p id="result"> </p> </fieldset> <div id="renk"> </div> </form> </body> </html>
anarsistherif tarafından 28/Kas/14 01:08 tarihinde düzenlenmiştir -
aynen dediğin gibi yanda renkleri görmem lazım ama göremiyorum
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>type="color"</title>
<style type ="text/css">
form
{
width: 400px;
position: relative;
}
form tr td:nth-of-type(1)
{
width: 150px;
color: crimson;
font-family: "Gill Sans MT Condensed";
font-size: 20px;
}
div#renk
{
width: 100px;
height: 118px;
position: absolute;
right: -100px;
top: 10px;
}
p#result
{
font-family: consolas;
font-size: 15px;
color: #11b0ee;
font-weight: bold;
}
</style>
<script type="text/javascript">
var ch= function () {
var hsl = document.querySelector("input[name'hue']");
var saturation = document.querySelector("input[name'saturation']");
var light = document.querySelector("input[name'light']");
var target = document.getElementById("renk");
var colorStr="hsl("+hsl.value+"," + saturation.value + "%," + light.value+ "%)";
target.style.backgroundColor = colorStr;
var sonucYaz= document.getElementById("result");
sonucYaz.innerHTML = colorStr;
var style = document.defaultView.getComputedStyle(target, null);
sonucYaz.innerHTML += " ,hex:" + style.getPropertValue("background-color");
}
</script></head>
<body>
<form action="" name="form1">
<fieldset>
<legend>Renk Seçiçi</legend>
<table>
<tr>
<td>Hue (Renk)</td>
<td>
<input type="range" name="hue" min="0" max="360"
step="1" onmousemove="ch();" />
360<sup>0</sub>
</td>
</tr>
<tr>
<td>Saturation(Doygunluk)</td>
<td>
<input type="range" name="saturation" min="0" max="100"
step="1" onmousemove="ch();" />
100%
</td>
</tr>
<tr>
<td>lightness(Aydınlık)</td>
<td>
<input type="range" name="light" min="0" max="100"
step="1" onmousemove="ch();" />
%100
</td>
</tr>
</table>
<p if="result"></p>
</fieldset>
<div id="renk">
</div>
</form>
</body>
</html> -
style yerine script yazmissin.
javascript'de function'u yanlis sekilde tanimlamissin.
queryselector'da objeyi yanlis belirtmissin.
ve envai cesit html hatasi var. mesela: <p if="result"></p> degil <p id="result"></p> gibisinden.
-
anarsistherif bunu yazdı
style yerine script yazmissin.
javascript'de function'u yanlis sekilde tanimlamissin.
queryselector'da objeyi yanlis belirtmissin.
ve envai cesit html hatasi var. mesela:
if="result">
degil
gibisinden.
üzerinden geçiyim bi kaç kere daha o zaman 200 sayfalık slayt olunca insan dalgınlasabilio hocam
-
calisanini verdim olm iste kurcuklama:)
-
anarsistherif bunu yazdı
style yerine script yazmissin.
javascript'de function'u yanlis sekilde tanimlamissin.
queryselector'da objeyi yanlis belirtmissin.
ve envai cesit html hatasi var. mesela:
if="result">
degil
gibisinden.
fonksiyon o şekilde de tanımlanabiliyor :) queryselector de eşittiri unutmuş yine
-
javascripti php ustunden ogrendiimden olsa gerek sdfg asdg