Öncelikle merhabalar.
Forumda yeniyim, bu açtığım ilk konu. JavaScript'le ilgili bir konuda yardıma ihtiyacım var.
Kendimi geliştirmek için ev ödevi gibi yazdığım bir siteye JavaScritp kullanarak hareketli bir arama çubuğu
eklemek istemiştim. Ama ne yaptımsa beceremedim. Ben de sorunun nerede olduğunu anlamak için ayrıyı bir
sayfada çalışırken css özelliklerinin değerlerini javascript'te değişkenelere atayamadığımı farkettim.
Kodlarım şu şekilde:
HTML:
<!DOCTYPE html>
<html>
<head>
<**** charset="utf-8">
<title>DENEME</title>
<link rel="stylesheet" href="deneme.css">
<script src="deneme.js" language="javascript" type="text/javascript"></script>
</head>
<body>
<input id="logo" class="searchLogo" type="button" value="" onfocus="sorgu()" onblur="yer2()" />
<div id="bar" class="search">
<input id="searchBar" type="search">
</div>
</body>
</html>
CSS:
.searchLogo {
width: 35px;
height: 35px;
position: absolute;
top: 200px;
left: 500px;
background: url(search.png);
background-size: cover;
}
.search {
width: 300px;
height: 35px;
position: absolute;
top: 200px;
left: 545px;
}
#searchBar {
width: 300px;
height: 35px;
border-radius: 20px;
opacity: 0;
}
JAVASCRIPT:
function sorgu() {
var x = ********.getElementById("logo").style.left;
var y = ********.getElementById("bar").style.left;
var z = ********.getElementById("searchBar").style.opacity;
console.log(typeof x, "x =", x);
console.log(typeof y, "y =", y);
console.log(typeof z, "z =", z);
x = x.slice(0, 3);
x++;
y = y.slice(0, 3);
y++;
z + 0.003;
console.log(typeof x, "x =", x);
console.log(typeof y, "y =", y);
console.log(typeof z, "z =", z);
}
Bu da konsol ekranı:
string x =
string y =
string z =
number x = 1
number y = 1
string z =
İşin garibi fonksiyonu çalıştıran butona tekrar tıkladığımda konsol çıktısı şu şekilde oluyor:
string x =
string y = 545px
string z =
number x = 1
number y = 546
string z =
Özetlemek gerekirse konsol ekranında da görüldüğü gibi elementlerin left ve opacity değerlerinin veri türleri
başta string olarak görünüyor ve üçü de boş. Matematik işlemi uygulandığında x ve y değişkenlerinin veri türü
number olarak değişiyor ancak z'de hala hareket yok. Aynı butona ikinci kez tıkladığımda (2 ve sonraki
tıklamaların sonucu hep aynı) sadece y değişkeni için istediğim işlem gerçekleşiyor.
Benim sitemde yapmak istediğim sadece arama butonu görünür haldeyken butona tıklandığında, butonun ve arama
çubuğunun sola doğru kayarken arama çubuğunun yavaşça görünür hale gelmesi.
Biraz uzattım ama umarım yeterince açıklayıcı olabilmişimdir.
Yardımlarınızı bekliyorum. Şimdiden teşekkürler.
Forumda yeniyim, bu açtığım ilk konu. JavaScript'le ilgili bir konuda yardıma ihtiyacım var.
Kendimi geliştirmek için ev ödevi gibi yazdığım bir siteye JavaScritp kullanarak hareketli bir arama çubuğu
eklemek istemiştim. Ama ne yaptımsa beceremedim. Ben de sorunun nerede olduğunu anlamak için ayrıyı bir
sayfada çalışırken css özelliklerinin değerlerini javascript'te değişkenelere atayamadığımı farkettim.
Kodlarım şu şekilde:
HTML:
<!DOCTYPE html>
<html>
<head>
<**** charset="utf-8">
<title>DENEME</title>
<link rel="stylesheet" href="deneme.css">
<script src="deneme.js" language="javascript" type="text/javascript"></script>
</head>
<body>
<input id="logo" class="searchLogo" type="button" value="" onfocus="sorgu()" onblur="yer2()" />
<div id="bar" class="search">
<input id="searchBar" type="search">
</div>
</body>
</html>
CSS:
.searchLogo {
width: 35px;
height: 35px;
position: absolute;
top: 200px;
left: 500px;
background: url(search.png);
background-size: cover;
}
.search {
width: 300px;
height: 35px;
position: absolute;
top: 200px;
left: 545px;
}
#searchBar {
width: 300px;
height: 35px;
border-radius: 20px;
opacity: 0;
}
JAVASCRIPT:
function sorgu() {
var x = ********.getElementById("logo").style.left;
var y = ********.getElementById("bar").style.left;
var z = ********.getElementById("searchBar").style.opacity;
console.log(typeof x, "x =", x);
console.log(typeof y, "y =", y);
console.log(typeof z, "z =", z);
x = x.slice(0, 3);
x++;
y = y.slice(0, 3);
y++;
z + 0.003;
console.log(typeof x, "x =", x);
console.log(typeof y, "y =", y);
console.log(typeof z, "z =", z);
}
Bu da konsol ekranı:
string x =
string y =
string z =
number x = 1
number y = 1
string z =
İşin garibi fonksiyonu çalıştıran butona tekrar tıkladığımda konsol çıktısı şu şekilde oluyor:
string x =
string y = 545px
string z =
number x = 1
number y = 546
string z =
Özetlemek gerekirse konsol ekranında da görüldüğü gibi elementlerin left ve opacity değerlerinin veri türleri
başta string olarak görünüyor ve üçü de boş. Matematik işlemi uygulandığında x ve y değişkenlerinin veri türü
number olarak değişiyor ancak z'de hala hareket yok. Aynı butona ikinci kez tıkladığımda (2 ve sonraki
tıklamaların sonucu hep aynı) sadece y değişkeni için istediğim işlem gerçekleşiyor.
Benim sitemde yapmak istediğim sadece arama butonu görünür haldeyken butona tıklandığında, butonun ve arama
çubuğunun sola doğru kayarken arama çubuğunun yavaşça görünür hale gelmesi.
Biraz uzattım ama umarım yeterince açıklayıcı olabilmişimdir.
Yardımlarınızı bekliyorum. Şimdiden teşekkürler.
