• 24-04-2023, 00:50:31
    #10
    SemihCAN adlı üyeden alıntı: mesajı görüntüle
    hayır hata almıyorum, js kodları head arasında ekli ilk mesajımda html sayfanın tamamını paylaştığım şekilde.

    Bu şekilde deneseniz. Script body içerisine alsak.


    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js"></script>
    </head>
    <body>
    <a href="#" class="link"><span class="icon"><i class="fas fa-arrow-right"></i></span>Link Metni</a>

    <script>
    var link = document.querySelector('.link');
    var icon = document.querySelector('.icon i');
    link.addEventListener('click', function (event) {
    event.preventDefault();
    icon.classList.toggle('fa-arrow-right');
    icon.classList.toggle('fa-arrow-left');
    });
    </script>
    </body>
    </html>
  • 24-04-2023, 00:50:54
    #11
    Üyeliği durduruldu
    chat gpt yanıtı:
    Bu kodda bir sorun gözükmüyor. Ancak kodda kullanılan Font Awesome kütüphanesi versiyonu bazı değişiklikler gösterebilir. Bu nedenle, kodu çalıştırmadan önce Font Awesome kütüphanesi eklenmiş mi diye kontrol etmeniz gerekiyor.
    Ayrıca, kodu bir web sayfasında çalıştırıyorsanız, kodunun çalışabilmesi için dosyanın bir sunucuda yer alması gerekiyor. Yerel olarak çalıştırmak istiyorsanız, bir sunucu kurmanız gerekiyor. Aksi takdirde, bazı hatalarla karşılaşabilirsiniz.
    Eğer yine de sorun devam ediyorsa, hatanın ne olduğunu ve hangi tarayıcıda çalıştırmaya çalıştığınızı belirtebilirseniz daha iyi yardımcı olabilirim.
  • 24-04-2023, 00:52:11
    #12
    Kimlik doğrulama veya yönetimden onay bekliyor.
    SemihCAN adlı üyeden alıntı: mesajı görüntüle
    hayır hata almıyorum, js kodları head arasında ekli ilk mesajımda html sayfanın tamamını paylaştığım şekilde.
    Aşağıdaki şekilde denermisiniz?

    <html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
        <title>Document</title>
        <script type='text/javascript'>
            window.onload = function () {
                var link = document.querySelector('.link');
                var icon = document.querySelector('.icon i');
                link.addEventListener('click', function (event) {
                    event.preventDefault();
                    icon.classList.toggle('fa-arrow-right');
                    icon.classList.toggle('fa-arrow-left');
                });
            };
        </script>
    </head>
    <body>
        <a href="#" class="link"><span class="icon"><i class="fas fa-arrow-right"></i></span>Link Metni</a>
    </body>
    </html>
  • 24-04-2023, 00:52:20
    #13
    SemihCAN adlı üyeden alıntı: mesajı görüntüle
    hayır hata almıyorum, js kodları head arasında ekli ilk mesajımda html sayfanın tamamını paylaştığım şekilde.
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
        <title>Document</title>
    </head>
    <body>
        <a href="#" class="link"><span class="icon"><i class="fas fa-arrow-right"></i></span>Link Metni</a>
    
        <script type='text/javascript'>
            var link = document.querySelector('.link');
            var icon = document.querySelector('.icon i');
            link.addEventListener('click', function (event) {
                event.preventDefault();
                if (icon.classList.contains('fa-arrow-right')) {
                  icon.classList.remove('fa-arrow-right');
                  icon.classList.add('fa-arrow-left');
                } else {
                  icon.classList.remove('fa-arrow-left');
                  icon.classList.add('fa-arrow-right');
                }
            });
        </script>
    </body>
    </html>

    bu şekilde denermisin linke tıkladığında ok yönü değişecek şekilde kodu güncelledim.
  • 24-04-2023, 00:52:48
    #14
    if kullanın:

        event.preventDefault();
        if (icon.classList.contains('fa-arrow-right')) {
            icon.classList.remove('fa-arrow-right');
            icon.classList.add('fa-arrow-left');
        } else {
            icon.classList.remove('fa-arrow-left');
            icon.classList.add('fa-arrow-right');
        }
  • 24-04-2023, 00:52:50
    #15
    Alıntı
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <title>Document</title>
    </head>
    <body>
    <a href="#" class="link"><span class="icon"><i class="fas fa-arrow-right"></i></span>Link Metni</a>

    <script type='text/javascript'>
    var link = document.querySelector('.link');
    var icon = document.querySelector('.icon i');

    link.addEventListener('click', function (event) {
    event.preventDefault();
    icon.classList.toggle('fa-arrow-right');
    icon.classList.toggle('fa-arrow-left');
    });
    </script>
    </body>
    </html>
    Şunu dener misiniz?
  • 24-04-2023, 00:54:03
    #16
    WebAgency adlı üyeden alıntı: mesajı görüntüle
    Aşağıdaki şekilde denermisiniz?

    <html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
        <title>Document</title>
        <script type='text/javascript'>
            window.onload = function () {
                var link = document.querySelector('.link');
                var icon = document.querySelector('.icon i');
                link.addEventListener('click', function (event) {
                    event.preventDefault();
                    icon.classList.toggle('fa-arrow-right');
                    icon.classList.toggle('fa-arrow-left');
                });
            };
        </script>
    </head>
    <body>
        <a href="#" class="link"><span class="icon"><i class="fas fa-arrow-right"></i></span>Link Metni</a>
    </body>
    </html>
    Bu şekilde çalıştı hocam. çok teşekkür ederim tekrar.
  • 24-04-2023, 00:56:59
    #17
    SemihCAN adlı üyeden alıntı: mesajı görüntüle
    Bu şekilde çalıştı hocam. çok teşekkür ederim tekrar.
    Rica ederim hatayı da kısaca açıklayayım hemen bilginiz olsun. Aynı sorunlarla karşılaşan arkadaşlar da denk gelebilir sonralardan.

    JavaScript kodunun sayfanın yüklenmesinden önce çalışmasından kaynaklı sorun yaşanıyordu. Bundan dolayı "document.querySelector() "çağrısı belirtilen sınıf adlarını içeren herhangi bir öğeyi bulamıyor ve null değer döndürüyordur hacım. Çözümü için javascript kodunun sayfanın tamamen yüklendikten sonra çalışmasını sağladık. Bunu yaparken "window.onload" olayına bağlıyoruz. Yani "window.onload" olayı tüm HTML içeriğinin yüklendiğinden ve hazır olduğundan emin olmamızı sağlar.
  • 24-04-2023, 00:58:18
    #18
    WebAgency adlı üyeden alıntı: mesajı görüntüle
    Rica ederim hatayı da kısaca açıklayayım hemen bilginiz olsun. Aynı sorunlarla karşılaşan arkadaşlar da denk gelebilir sonralardan.

    JavaScript kodunun sayfanın yüklenmesinden önce çalışmasından kaynaklı sorun yaşanıyordu. Bundan dolayı "document.querySelector() "çağrısı belirtilen sınıf adlarını içeren herhangi bir öğeyi bulamıyor ve null değer döndürüyordur hacım. Çözümü için javascript kodunun sayfanın tamamen yüklendikten sonra çalışmasını sağladık. Bunu yaparken "window.onload" olayına bağlıyoruz yani bu tüm HTML içeriğinin yüklendiğinden ve hazır olduğundan emin olmamızı sağlar.
    Bende çözümünüze bakıyordum tam hocam, açıklamanız da çok iyi oldu.