javascript ile fonksiyon tanımlama (yardım)

Kodla Büyü
F

freemce

Site Gezgini
Mesajlar
35
<html>
<head>
<script>
function getler()
{
var t1=document.getElementById("t1");
var t2=document.getElementById("t2");
var t3=document.getElementById("t3");
}
function topla()
{
c=Number(t1.value)+Number(t2.value);
t3.value=c;
}
</script>
</head>
<body>
<input type="text" id="t1">
<input type="text" id="t2">
<input type="text" id="t3">
<input type="button" value="topla" id="b1" onclick="topla()">
</body>
</html>

arkadaşlar yukarıdaki getler () fonksiyonunu tanımladım ama çalıştırmadan, hemen aşağıdaki topla fonksiyonunda değişkenleri kullanıyorum çalışıyor. nasıl çalıştı anlamadım? ben getler() fonksiyonunu hiç çalıştırmadım ki. Yardımcı olur musunuz?
 
Son düzenleme:
freemce' Alıntı:
<html>
<head>
<script>
function getler()
{
var t1=document.getElementById("t1");
var t2=document.getElementById("t2");
var t3=document.getElementById("t3");
}
function topla()
{
c=Number(t1.value)+Number(t2.value);
t3.value=c;
}
</script>
</head>
<body>
<input type="text" id="t1">
<input type="text" id="t2">
<input type="text" id="t3">
<input type="button" value="topla" id="b1" onclick="topla()">
</body>
</body>
</html>

arkadaşlar yukarıdaki getler () fonksiyonunu tanımladım ama çalıştırmadan, hemen aşağıdaki topla fonksiyonunda değişkenleri kullanıyorum çalışıyor. nasıl çalıştı anlamadım? ben getler() fonksiyonunu hiç çalıştırmadım ki. Yardımcı olur musunuz?
Genişletmek için tıkla ...

getler olmadığında da çalışıyor. İki farklı yolla değer elde edilebiliyor. Alttaki sayfalarda anlatılmış:

https://www.javatpoint.com/document-getElementById()-method

https://www.javatpoint.com/document-object-model
 
function topla()
{
getler()
c=Number(t1.value)+Number(t2.value);
t3.value=c;
}

Şeklinde yazarsanız çalışır. Getler fonksiyonunu tanımlamışsınız ama herhangi bir yerde çağırmamışsınız. Toplama işleminden önce çağırmanız lazım.
 
Kod: 
<html>
  <head>
    <script>
      var t1;
      var t2;
      var t3;
      function getler() {
        t1 = document.getElementById("t1");
        t2 = document.getElementById("t2");
        t3 = document.getElementById("t3");
      }
      function topla() {
        getler()
        c = Number(t1.value) + Number(t2.value);
        t3.value = c;
      }
    </script>
  </head>
  <body>
    <input type="text" id="t1" />
    <input type="text" id="t2" />
    <input type="text" id="t3" />
    <input type="button" value="topla" id="b1" onclick="topla()" />
  </body>
</html>
Bu şekilde önce değişkenleri atarsanız ve fonksiyon içerisinde değiştirirseniz getleri çalıştırmadan sonuç almazsınız. istediğiniz şey bu sanırım. Kolay gelsin
 
Derste yaptıgım bır ornek hocam ısınıze yarar belkı.
<!DOCTYPE html>
<html>
<head>
<title>
HESAP MAKINESI UYGULAMASI</title>
<script type="text/javascript">
function toplama()
{
var s1=document.getElementById("SAYI1").value;
var s2=document.getElementById("SAYI2").value;
var s3=parseInt(s1)+parseInt(s2);
document.getElementById("SONUC").value=s3;
}
function FARK()
{
var s1=document.getElementById("SAYI1").value;
var s2=document.getElementById("SAYI2").value;
var s3=parseInt(s1) - parseInt(s2);
document.getElementById("SONUC").value=s3;
}
function CARP()
{
var s1=document.getElementById("SAYI1").value;
var s2=document.getElementById("SAYI2").value;
var s3=parseInt(s1)*parseInt(s2);
document.getElementById("SONUC").value=s3;
}
function BOL()
{
var s1=document.getElementById("SAYI1").value;
var s2=document.getElementById("SAYI2").value;
var s3=parseInt(s1) /parseInt(s2);
document.getElementById("SONUC").value=s3;
}
</script>
</head>
<body>
<table border="0">
<tr><td>SAYI1</td><td><input type="text" id="SAYI1" pattern="[^0-9]" placeholder="lutfen bir sayı girin" required></td></tr>
<tr><td>SAYI2</td><td><input type="text" id="SAYI2" pattern="[^0-9]" placeholder="lutfen bir sayı girin" required></td></tr>
<tr><td>SONUC</td><td><input type="text" id="SONUC"></td></tr>
<tr><td><input type="button" value="+" onclick="toplama()">
<input type="button" value="-" onclick="FARK()">
<input type="button" value="*" onclick="CARP()">
<input type="button" value="/" onclick="BOL()">
</td></tr>
</table>
</body>
</html>
 
@eduran, hocam dışında kimse mesajı okumamış ya da anlamamış.
id verdiğiniz nesnelere normalde getElementById ile ulaşabiliyor olsak da muhtemelen tarayıcıların sunduğu esneklikle doğrudan ID'sini kullanarak da ulaşılabilir hale gelinmiş.
Sizin getler isimli fonksiyon zaten çalışmıyor olduğu gibi çalışsa da t1, t2, t3 değişkenlerini fonksiyon içerisinde tanımladığınız için topla fonksiyonu içerisinden onlara ulaşamazdınız.
topla fonksiyonundaki t1, t2, t3 ifadeleri doğrudan metin kutularının ID'leri. getler fonksiyonun silseniz de mevcut haliyle kodunuz çalışır.
 
yakuphan' Alıntı:
@eduran, hocam dışında kimse mesajı okumamış ya da anlamamış.
id verdiğiniz nesnelere normalde getElementById ile ulaşabiliyor olsak da muhtemelen tarayıcıların sunduğu esneklikle doğrudan ID'sini kullanarak da ulaşılabilir hale gelinmiş.
Sizin getler isimli fonksiyon zaten çalışmıyor olduğu gibi çalışsa da t1, t2, t3 değişkenlerini fonksiyon içerisinde tanımladığınız için topla fonksiyonu içerisinden onlara ulaşamazdınız.
topla fonksiyonundaki t1, t2, t3 ifadeleri doğrudan metin kutularının ID'leri. getler fonksiyonun silseniz de mevcut haliyle kodunuz çalışır.
Genişletmek için tıkla ...
Sabah uykulu uykulu scope konusunu gözden kaçırmışım. :confused:
 
yakuphan' Alıntı:
@eduran, hocam dışında kimse mesajı okumamış ya da anlamamış.
id verdiğiniz nesnelere normalde getElementById ile ulaşabiliyor olsak da muhtemelen tarayıcıların sunduğu esneklikle doğrudan ID'sini kullanarak da ulaşılabilir hale gelinmiş.
Sizin getler isimli fonksiyon zaten çalışmıyor olduğu gibi çalışsa da t1, t2, t3 değişkenlerini fonksiyon içerisinde tanımladığınız için topla fonksiyonu içerisinden onlara ulaşamazdınız.
topla fonksiyonundaki t1, t2, t3 ifadeleri doğrudan metin kutularının ID'leri. getler fonksiyonun silseniz de mevcut haliyle kodunuz çalışır.
Genişletmek için tıkla ...
Id ile ulaşılabiliyor hocam, ancak soruyu soran kişi getleri çalıştırarak değişkenleri tanımlamak istiyor olabilir. Bu yüzden o şekilde bir kod attım...
 
<html>
<head>
<script>
function topla()
{
c=Number(t1.value)+Number(t2.value);
t3.value=c;
}
</script>
</head>
<body>
<input type="text" id="t1">
<input type="text" id="t2">
<input type="text" id="t3">
<input type="button" value="topla" id="b1" onclick="topla()">
</body>
</html>

bu şekilde çalışıyor. ben elemanlara id si ile direkt ulaşabiliyorum.
peki
document.getElementById("")
ne işe yarıyor? ben bu komutu hep kullanırdım. ne gibi durumlarda getelement kullanmalıyım?
 
Son düzenleme:
document.getElementById("") ile nesneye ulaştığınız için sadece value'sine değil diğer özelliklerine de ulaşabilirsiniz.
id üzerinden value'yi alırsanız sadece value'yi almış olursunuz.
Bir de bu iki yöntemin tarayıcı destekleri de önemli tabiki. Hedef tarayıcılar ve erişilmek istenen özelliklere göre istenilen yöntem seçilebilir.
 
hyrgul' Alıntı:
document.getElementById("") ile nesneye ulaştığınız için sadece value'sine değil diğer özelliklerine de ulaşabilirsiniz.
id üzerinden value'yi alırsanız sadece value'yi almış olursunuz.
Bir de bu iki yöntemin tarayıcı destekleri de önemli tabiki. Hedef tarayıcılar ve erişilmek istenen özelliklere göre istenilen yöntem seçilebilir.
Genişletmek için tıkla ...

hocam teşekkür ederim.
aşağıda diğer özelliklere de ulaşabiliyorum.
<html>
<head>
<script>
function degisim()
{
b1.style.color="red";
kutu1.innerHTML="div yazısı";
kutu1.style.textAlign="center";
kutu1.style.border="3px solid green";
kutu1.style.width="40%";
kutu1.style.height="50%";
kutu1.style.margin="auto";
kutu1.style.fontSize="60px";
document.body.style.backgroundColor="#ccc";
kutu1.innerHTML=t1.value;
b4.style.backgroundColor="aqua";
baslik.innerHTML="yazı değişti";
baslik.style.color="green";
baslik.style.fontSize="80px";
baslik.style.textAlign="center";
}
function topla()
{
t3.value=Number(t1.value)+Number(t2.value);
}
function fark()
{
t3.value=Number(t1.value)-Number(t2.value);
}
function carp()
{
t3.value=Number(t1.value)*Number(t2.value);
}
</script>
</head>
<body>
<h1 id="baslik">yazımız</h1>
<div id="kutu1">kutu</div>
<input type="text" id="t1" value="12">
<input type="text" id="t2" value="3">
<input type="text" id="t3">
<input type="button" value="topla" id="b1" onclick="topla()">
<input type="button" value="çıkart" id="b2" onclick="fark()">
<input type="button" value="çarp" id="b3" onclick="carp()">
<input type="button" value="degiştir" id="b4" onclick="degisim()">
</body>
</html>

yukarıdaki örnekte

kutu1.style.width="40%";
kutu1.style.height="50%";
kutu1.style.margin="auto";
kutu1.style.fontSize="60px";
baslik.innerHTML="yazı değişti";
baslik.style.color="green";
baslik.style.fontSize="80px";
baslik.style.textAlign="center";

gibi özellikleri değiştirebiliriyoruz. O zaman şimdilik document.getElementById("") özelliğini kullanmama gerek kalmadı. Bana getElementin kullanılmasının gerekli olduğu bir örnek gönderirmisiniz. Ben hala konuyu tam anlayamadım. (öğrencilerin de kafası karışmamış olur.)
 
Cevap yazmak için giriş yap yada kayıt ol.
Geri
Üst