0
Kayıt Ol

Gece Hayra Girmek İsteyen Var mı (JS ve CSS)

12

●

422

  • 18-08-2024, 03:01:14
    #1
    mustafacot
    mustafacot
    2 adet js kodum var, birisi veri çekiyor diğeri açılır penceremi aktif ediyor. Veriyi çektiğimde açılır pencerem bozuluyor bu konuda yardımcı olacak var mı?


    async function fetchSubscriberCount() {
    const apiKey = 'KEY'; //
    const channelId = 'Kanal İD'; //
    const url = `https://www.googleapis.com/youtube/v3/channels?part=statistics&id=${channelId}&key=${apiKey}`;
    
    try {
        const response = await fetch(url);
        const data = await response.json();
        
        const subscriberCount = data.items[0].statistics.subscriberCount;
        
        // Abone sayısını h2 etiketi içerisine yazdırınca bozuluyor
        document.getElementById('subscriberCount').innerHTML = `${subscriberCount}<br><span>Kişi Abone</span>`;
    } catch (error) {
        console.error('Abone sayısını çekerken bir hata oluştu:', error);
        document.getElementById('subscriberCount').innerHTML = 'HATA<br><span>Kişi Abone</span>';
    }
}
    Buda açılır pencere kodum

    const cards = document.querySelectorAll('.card');
    const toggles = document.querySelectorAll('.toggle');
    
    toggles.forEach((toggle, index) => {
        toggle.onclick = function () {
            const card = cards[index];
            card.classList.toggle('active');
    
            setTimeout(() => {
                card.classList.remove('active');
            }, 4000);
        };
    });
    
    document.addEventListener('click', (event) => {
        cards.forEach(card => {
            if (card.classList.contains('active') && !card.contains(event.target)) {
                card.classList.remove('active');
            }
        });
    });
  • 18-08-2024, 03:24:49
    #2
    Selimhalim
    Selimhalim
    .

    ### Çözüm Önerileri:
    1. **Veri Çekme İşleminde Değişiklik*
    - `innerHTML` yerine `textContent` kullanmayı deneyin:
    ```javascript
    document.getElementById('subscriberCount').textCon tent = `${subscriberCount} Kişi Abone`;
    ```
    Bu yöntem, DOM manipülasyonlarını daha basit hale getirir ve beklenmedik etkileşimleri azaltabilir.

    2. **Açılır Pencere Üzerinde Kontrol*
    - `card` elemanlarının yapısını bozmamak için DOM'a eklediğiniz HTML'nin açılır pencereden bağımsız olmasına dikkat edin.
    - `active` sınıfı eklenirken yapılan işlemleri kontrol edin ve veriyi çektikten sonra `toggle` işleminin doğru çalışıp çalışmadığını test edin.

    3. **Zamanlamayı Kontrol Edin*
    - Abone sayısı çekme işlemi tamamlandıktan sonra açılır pencerenin etkin olup olmadığını kontrol edebilirsiniz:
    ```javascript
    fetchSubscriberCount().then(() => {
    // Açılır pencere etkin mi kontrol et
    if (document.querySelector('.card.active')) {
    console.log("Açılır pencere aktif.");
    }
    });
    ```

    Eğer bu öneriler işe yaramazsa, sorunun tam olarak ne zaman ortaya çıktığını daha detaylı analiz etmek gerekebilir. Olaylar ve DOM değişiklikleri arasındaki ilişkiyi izleyerek çözüme ulaşabiliriz.
  • 18-08-2024, 03:29:03
    #3
    mustafacot
    mustafacot
    Selimhalim adlı üyeden alıntı: mesajı görüntüle
    .

    ### Çözüm Önerileri:
    1. **Veri Çekme İşleminde Değişiklik*
    - `innerHTML` yerine `textContent` kullanmayı deneyin:
    ```javascript
    document.getElementById('subscriberCount').textCon tent = `${subscriberCount} Kişi Abone`;
    ```
    Bu yöntem, DOM manipülasyonlarını daha basit hale getirir ve beklenmedik etkileşimleri azaltabilir.

    2. **Açılır Pencere Üzerinde Kontrol*
    - `card` elemanlarının yapısını bozmamak için DOM'a eklediğiniz HTML'nin açılır pencereden bağımsız olmasına dikkat edin.
    - `active` sınıfı eklenirken yapılan işlemleri kontrol edin ve veriyi çektikten sonra `toggle` işleminin doğru çalışıp çalışmadığını test edin.

    3. **Zamanlamayı Kontrol Edin*
    - Abone sayısı çekme işlemi tamamlandıktan sonra açılır pencerenin etkin olup olmadığını kontrol edebilirsiniz:
    ```javascript
    fetchSubscriberCount().then(() => {
    // Açılır pencere etkin mi kontrol et
    if (document.querySelector('.card.active')) {
    console.log("Açılır pencere aktif.");
    }
    });
    ```

    Eğer bu öneriler işe yaramazsa, sorunun tam olarak ne zaman ortaya çıktığını daha detaylı analiz etmek gerekebilir. Olaylar ve DOM değişiklikleri arasındaki ilişkiyi izleyerek çözüme ulaşabiliriz.
    Hocam işiniz yok ise any ile bağlanıp inceleyebilir misiniz
  • 18-08-2024, 03:30:18
    #4
    Selimhalim
    Selimhalim
    mustafacot adlı üyeden alıntı: mesajı görüntüle
    Hocam işiniz yok ise any ile bağlanıp inceleyebilir misiniz
    Hiç anlamam bu işlerden 😂😂 yapay zekanın verdiği cevap bu bi değerlendirin isterseniz
  • 18-08-2024, 03:30:38
    #5
    hedefniche
    hedefniche
    chatqpt den yardım almayı denediniz mi?
  • 18-08-2024, 03:30:43
    #6
    mustafacot
    mustafacot
    Selimhalim adlı üyeden alıntı: mesajı görüntüle
    Hiç anlamam bu işlerden 😂😂 yapay zekanın verdiği cevap bu bi değerlendirin isterseniz
    Ya hocam hahahaha Sağ olun
  • 18-08-2024, 03:31:04
    #7
    mustafacot
    mustafacot
    hedefniche adlı üyeden alıntı: mesajı görüntüle
    chatqpt den yardım almayı denediniz mi?
    denedim sonuç alamadım hocam
  • 18-08-2024, 03:32:17
    #8
    hedefniche
    hedefniche
    mustafacot adlı üyeden alıntı: mesajı görüntüle
    denedim sonuç alamadım hocam
    Sorununuzun nedeni, innerHTML ile yapılan manipülasyonların, DOM'daki diğer elementlerle etkileşime girerek açılır pencerenizin işlevselliğini bozması olabilir. Bunu çözmek için innerHTML yerine textContent veya insertAdjacentHTML gibi daha güvenli yöntemler kullanabilirsiniz.

    Düzenlenmiş Kodlar:


    1. Abone Sayısını Çeken Kod:


    async function fetchSubscriberCount() {
    const apiKey = 'KEY'; //
    const channelId = 'Kanal İD'; //
    const url = `https://www.googleapis.com/youtube/v3/channels?part=statistics&id=${channelId}&key=${apiKey}`;
    
    try {
        const response = await fetch(url);
        const data = await response.json();
        
        const subscriberCount = data.items[0].statistics.subscriberCount;
        
        // `innerHTML` yerine `insertAdjacentHTML` kullanımı
        document.getElementById('subscriberCount').insertAdjacentHTML('afterbegin', `${subscriberCount}<br><span>Kişi Abone</span>`);
    } catch (error) {
        console.error('Abone sayısını çekerken bir hata oluştu:', error);
        document.getElementById('subscriberCount').insertAdjacentHTML('afterbegin', 'HATA<br><span>Kişi Abone</span>');
    }
}

    2. Açılır Pencere Kodu:


    Bu koda dokunmadan bırakabilirsiniz. Ancak, eğer sorun devam ederse, setTimeout veya document.addEventListener kullanımıyla ilgili olası çakışmaları incelemek gerekebilir.
    Bu şekilde innerHTML yerine daha kontrollü bir yöntemle HTML eklemiş olursunuz. Eğer sorun devam ederse, tarayıcı konsolunda hata olup olmadığını kontrol ederek daha fazla detay sağlayabilirsiniz.

    Not;Chatqpt den alıntıdır...
  • 18-08-2024, 03:34:47
    #9
    TheSeth
    TheSeth
    GPT 3.5 ile denediyseniz aşağıdan ücretsiz olarak GPT 4 kullanabilirsiniz GPT 4 ile deneyin daha iyi sonuç verir
    https://www.yeschat.ai/