Bu kod neden çalışmıyor? (java Script) - Sayfa 2

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

~~erebusx~~

Ü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

Vexria

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

emrahaksoy

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

rws

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

atrkylmz

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

SemihCAN

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

Vexria

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

SemihCAN

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.