Javascript Kuzen Düğüm Oluşturma

22/Tem/16 14:50

Kısayol

Şikayet

Özel Mesaj

kofcu

Kayıt Tarihi: 29/Ağustos/2014

Merhaba arkadaşlar bir tablo ve altına bir buton koyup her butona tıkladığımda son sırayı clonelasın istiyorum.

nerede hata yaptım bulamıyorum yardımcı olur musunuz?

html kodlarım:

<div style="width: 100%">
    <div class="row s12 col margin-top">
        Başlık
    </div>
    <div class="row">
        <div class="s3 col">
            A
        </div>
        <div class="s3 col">
            B
        </div>
        <div class="s3 col">
            C
        </div>
        <div class="s3 col">
            D
        </div>
    </div>
    <div class="row">
        <div class="s3 col">
            <input class="center s11 col" type="text"/>
        </div>
        <div class="s3 col">
            <input class="center s11 col" type="text"/>
        </div>
        <div class="s3 col">
            <input class="center s11 col" type="text"/>
        </div>
        <div class="s3 col">
            <input class="center s11 col" type="text" readonly="readonly" />
        </div>
    </div>
</div>
<div class="row">
    <button>Reset</button>
    <button onclick="newcousin()">ekle</button>
</div>

javascript kodlarım:

function newcousin() {
    parent = this.parentNode;
    aunt = parent.previousSibling;
    lastCousin = aunt.lastChild;
    newCousin = lastCousin.cloneNode(true);
    aunt.appendChild(newCousin);
}

meraklısına CSS kodlarım:

.row:after{
    content:"";
    display:table;
    clear:both
}

col{
    padding:0 8px;
    float:left;
    width:100%
}

.col.s1{width:8.33333%}
.col.s2{width:16.66666%}
.col.s3{width:24.99999%}
.col.s4{width:33.33333%}
.col.s5{width:41.66666%}
.col.s6{width:49.99999%}
.col.s7{width:58.33333%}
.col.s8{width:66.66666%}
.col.s9{width:74.99999%}
.col.s10{width:83.33333%}
.col.s11{width:91.66666%}
.col.s12{width:99.99999%}

.margin-top{margin-top:16px!important}

kofcu tarafından 22/Tem/16 15:00 tarihinde düzenlenmiştir

ben de sevgiden yanayım...

Alıntı yap

22/Tem/16 23:28

Kısayol

Şikayet

Özel Mesaj

kofcu

Kayıt Tarihi: 29/Ağustos/2014

akşam girenler için uplamış olayım

ben de sevgiden yanayım...

Alıntı yap

23/Tem/16 00:07

Kısayol

Şikayet

Özel Mesaj

kvasir

Kayıt Tarihi: 24/Ağustos/2005

Bu gibi durumlarda Ctrl + Shift + J tuşuna basarak Javascript Console'u aç.

Senin scriptin verdiği hata

Görüldüğü gibi ekle düğmesinin newcousin fonksiyonu görülmüyor. Javascript kodunu doğru bir yere yerleştirmelisin.

Sonrasında aldığım hata ise

Neden bu hata oluşuyor ? Bu hata oluşuyor çünkü global scopetaki fonksiyonundan this çağırıyorsun.

this.parentNode demek, window nesnesinin parentNode'u demek ki öyle birşey yoktur. Bunu düzeltmek için

function newcousin(self) {

var parent = self.parentNode;

şeklinde fonksiyonu düzelt ve bu fonksiyonu

<button onclick="newcousin(this)">ekle</button>

şeklinde çağır.

Not : Ayrıca değişkenlerde var kullanmadığını gördüm. Buradaki kullanımda sorun yok fakat global scope/local scope olarak var kullanımını araştır.

Alıntı yap

23/Tem/16 13:16

Kısayol

Şikayet

Özel Mesaj

kofcu

Kayıt Tarihi: 29/Ağustos/2014

hocam ben burda 2 önemli hata yapmışım

Birincisi söylediğin scope olarak yanlış düşünmüşüm. this'i fonksiyonda değil elementte kullanmalıydım.

İkincisi previousSibling ve lastChild, element olarak döndürmüyormuş bu hatayı yanlış bilgiden dolayı yaptım, düzelttim.

sonuç olarak htmldeki ilgili buton böyle oldu:

<button onclick="newcousin(this)">ekle</button>

fonksiyon ise böyle:

function newcousin(a) {
    var parent = a.parentNode;
    var aunt = parent.previousElementSibling;
    var lastCousin = aunt.lastElementChild;
    newCousin = lastCousin.cloneNode(true);
    aunt.appendChild(newCousin);
}

bu arada senin söylediğin self self yerine a a da koysam oldu. self'in başka bir anlamı var mı acaba?

kofcu tarafından 23/Tem/16 13:18 tarihinde düzenlenmiştir

ben de sevgiden yanayım...

Alıntı yap

23/Tem/16 14:03

Kısayol

Şikayet

Özel Mesaj

kvasir

Kayıt Tarihi: 24/Ağustos/2005

kofcu bunu yazdı

hocam ben burda 2 önemli hata yapmışım

Birincisi söylediğin scope olarak yanlış düşünmüşüm. this'i fonksiyonda değil elementte kullanmalıydım.

İkincisi previousSibling ve lastChild, element olarak döndürmüyormuş bu hatayı yanlış bilgiden dolayı yaptım, düzelttim.

sonuç olarak htmldeki ilgili buton böyle oldu:

ekle

fonksiyon ise böyle:

function newcousin(a) {
    var parent = a.parentNode;
    var aunt = parent.previousElementSibling;
    var lastCousin = aunt.lastElementChild;
    newCousin = lastCousin.cloneNode(true);
    aunt.appendChild(newCousin);
}

bu arada senin söylediğin self self yerine a a da koysam oldu. self'in başka bir anlamı var mı acaba?

ne koyarsan olur, değişken ismi olarak self veya that kullanmak yaygın bir davranış, kodun okunmasını kolaylaştırır.

Javascript temelin zayıf gibi görünüyor, ortadan dalmaktansa ne ne işe yarıyor anlamak için,

İngilizcen varsa mozilla'nın MDN javascript tutorial'larına bak, takıldığın yerlerde daha basit anlatımlar için w3c'ye bak.

Temeli oturttuktan sonra işleyişi, ince detayları anlamak için(Temel bilgilerde bolca mevcut, direk dalabilirsin) : http://bonsaiden.github.io/JavaScript-Garden/tr/

Bir süredir konularını görüyorum, basit hatalarla cebelleşiyorsun. Temelleri oturt önce.

Alıntı yap

23/Tem/16 15:24

Kısayol

Şikayet

Özel Mesaj

kofcu

Kayıt Tarihi: 29/Ağustos/2014

kvasir bunu yazdı

kofcu bunu yazdı

hocam ben burda 2 önemli hata yapmışım

Birincisi söylediğin scope olarak yanlış düşünmüşüm. this'i fonksiyonda değil elementte kullanmalıydım.

İkincisi previousSibling ve lastChild, element olarak döndürmüyormuş bu hatayı yanlış bilgiden dolayı yaptım, düzelttim.

sonuç olarak htmldeki ilgili buton böyle oldu:

ekle

fonksiyon ise böyle:

function newcousin(a) {
    var parent = a.parentNode;
    var aunt = parent.previousElementSibling;
    var lastCousin = aunt.lastElementChild;
    newCousin = lastCousin.cloneNode(true);
    aunt.appendChild(newCousin);
}

bu arada senin söylediğin self self yerine a a da koysam oldu. self'in başka bir anlamı var mı acaba?

ne koyarsan olur, değişken ismi olarak self veya that kullanmak yaygın bir davranış, kodun okunmasını kolaylaştırır.

Javascript temelin zayıf gibi görünüyor, ortadan dalmaktansa ne ne işe yarıyor anlamak için,

İngilizcen varsa mozilla'nın MDN javascript tutorial'larına bak, takıldığın yerlerde daha basit anlatımlar için w3c'ye bak.

Temeli oturttuktan sonra işleyişi, ince detayları anlamak için(Temel bilgilerde bolca mevcut, direk dalabilirsin) : http://bonsaiden.github.io/JavaScript-Garden/tr/

Bir süredir konularını görüyorum, basit hatalarla cebelleşiyorsun. Temelleri oturt önce.

ben de bir süredir cevaplarını görüyorum :)

geçen yaz w3schools'daki kursu bitirdim onun üstüne bir şey koymadım.

programlama mesleğim değil hobi olarak yapıyorum ve ayırabildiğim tek zamanım yaz tatili o yüzden bazı şeylerde aceleci bazı şeylerde çekingen olabiliyorum.

aceleci: "ben bunu yaparım la" diyerek hemen işe koyulmak

çekingen: hala jQuery veya diğer javascript çatallarını öğrenmemek (gerçi temelin zayıf demişsin jQuery vesaire neyime dimi?)

kofcu tarafından 23/Tem/16 15:28 tarihinde düzenlenmiştir

ben de sevgiden yanayım...

Alıntı yap

23/Tem/16 16:27

Kısayol

Şikayet

Özel Mesaj

kvasir

Kayıt Tarihi: 24/Ağustos/2005

kofcu bunu yazdı

kvasir bunu yazdı

kofcu bunu yazdı

hocam ben burda 2 önemli hata yapmışım

Birincisi söylediğin scope olarak yanlış düşünmüşüm. this'i fonksiyonda değil elementte kullanmalıydım.

İkincisi previousSibling ve lastChild, element olarak döndürmüyormuş bu hatayı yanlış bilgiden dolayı yaptım, düzelttim.

sonuç olarak htmldeki ilgili buton böyle oldu:

ekle

fonksiyon ise böyle:

function newcousin(a) {
    var parent = a.parentNode;
    var aunt = parent.previousElementSibling;
    var lastCousin = aunt.lastElementChild;
    newCousin = lastCousin.cloneNode(true);
    aunt.appendChild(newCousin);
}

bu arada senin söylediğin self self yerine a a da koysam oldu. self'in başka bir anlamı var mı acaba?

ne koyarsan olur, değişken ismi olarak self veya that kullanmak yaygın bir davranış, kodun okunmasını kolaylaştırır.

Javascript temelin zayıf gibi görünüyor, ortadan dalmaktansa ne ne işe yarıyor anlamak için,

İngilizcen varsa mozilla'nın MDN javascript tutorial'larına bak, takıldığın yerlerde daha basit anlatımlar için w3c'ye bak.

Temeli oturttuktan sonra işleyişi, ince detayları anlamak için(Temel bilgilerde bolca mevcut, direk dalabilirsin) : http://bonsaiden.github.io/JavaScript-Garden/tr/

Bir süredir konularını görüyorum, basit hatalarla cebelleşiyorsun. Temelleri oturt önce.

ben de bir süredir cevaplarını görüyorum :)

geçen yaz w3schools'daki kursu bitirdim onun üstüne bir şey koymadım.

programlama mesleğim değil hobi olarak yapıyorum ve ayırabildiğim tek zamanım yaz tatili o yüzden bazı şeylerde aceleci bazı şeylerde çekingen olabiliyorum.

aceleci: "ben bunu yaparım la" diyerek hemen işe koyulmak

çekingen: hala jQuery veya diğer javascript çatallarını öğrenmemek (gerçi temelin zayıf demişsin jQuery vesaire neyime dimi?)

İçine girişerek yaparsın, jquery ve vanilla js'te tonla döküman var, sorabileceğin her soru cevaplanmıştır.

Benim sana demek istediğim kafandaki birşeyi, sözel olarak ifade edebildiğin bir sistemi koda dökebilme becerisini geliştirmen.

İngilizce biliyorsan, kodlara da aşinaysan ki bir süredir yapıyorsun, temelleri atmak 10-15 günü geçmez.

Alıntı yap