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

24-04-2023, 00:35:34

Merhaba arkadaşlar, linke tıkladığımda icon'un değişmesini istiyorum fakat başaramadım. hata nerede ilgili bir arkadaş bana yol gösterebilir mi?

<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'>
        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:40:04

#2

Vexria

Kimlik doğrulama veya yönetimden onay bekliyor.

Hacım öncelikle hayırlı geceler.
Sorun muhtemelen, JavaScript kodunda yer alan "icon" değişkeninde yaptığınız seçicinin yanlış yönlendirme almasından gibi ".icon i" deki i etiketinin .icon sınıfının altında olduğunu algılıyor direkt, i etiketi .icon sınıfının içinde yer alır.
Bundan dolayı, icon değişkenini doğru şekilde seçmek için ".icon i" yerine ".icon > i" kullanman gerekiyor. "> i" seçicisi, i etiketinin .icon sınıfının doğrudan altında olduğunu belirtmiş olur.
Düzeltilmiş halini iletiyorum deneyip dönüş yaparsan sevinirim.

<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'>
        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:44:34

#3

SemihCAN

Hayırlı geceler @WebAgency; hocam, ilginize teşekkür ederim. tespitiniz dikkate değer ancak sorunu çözemedi malesef.

24-04-2023, 00:45:52

#4

Vexria

SemihCAN adlı üyeden alıntı: mesajı görüntüle

Hayırlı geceler @WebAgency; hocam, ilginize teşekkür ederim. tespitiniz dikkate değer ancak sorunu çözemedi malesef.

Rica ederim. Yine aynı problemi mi yaşadınız acaba?

24-04-2023, 00:46:02

#5

ByMaDaK

Yukarıdaki kod, Font Awesome 6.4.0 kütüphanesinin yüklenmediğinden dolayı çalışmıyor gibi görünüyor. link öğesinde fas sınıfı kullanılarak tanımlanan simge, Font Awesome kütüphanesi yüklenmediği için sayfada görünmüyor.
Bu nedenle, sayfanızda Font Awesome kütüphanesini yüklediğinizden emin olun. Bunu yapmak için, <head> bölümüne aşağıdaki satırı ekleyin:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

Bunu deyebilir misiniz ?

SemihCAN adlı üyeden alıntı: mesajı görüntüle

Hayırlı geceler @WebAgency; hocam, ilginize teşekkür ederim. tespitiniz dikkate değer ancak sorunu çözemedi malesef.

24-04-2023, 00:46:23

#6

SemihCAN

WebAgency adlı üyeden alıntı: mesajı görüntüle

Rica ederim. Yine aynı problemi mi yaşadınız acaba?

evet linke tıklıyorum fakat icon değişmiyor.

24-04-2023, 00:47:48

#7

Vexria

SemihCAN adlı üyeden alıntı: mesajı görüntüle

evet linke tıklıyorum fakat icon değişmiyor.

Herhangi bir hata alıyormusunuz? Ek olarak js kodunuz <head> bölümünde veya <body> bölümünde ekli şekilde değil mi?

24-04-2023, 00:47:51

#8

SemihCAN

ByMaDaK adlı üyeden alıntı: mesajı görüntüle

Yukarıdaki kod, Font Awesome 6.4.0 kütüphanesinin yüklenmediğinden dolayı çalışmıyor gibi görünüyor. link öğesinde fas sınıfı kullanılarak tanımlanan simge, Font Awesome kütüphanesi yüklenmediği için sayfada görünmüyor.
Bu nedenle, sayfanızda Font Awesome kütüphanesini yüklediğinizden emin olun. Bunu yapmak için, <head> bölümüne aşağıdaki satırı ekleyin:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

Bunu deyebilir misiniz ?

merhaba, hocam head tagları arasında verdiğiniz kod ekli zaten.

24-04-2023, 00:49:04

#9

SemihCAN

WebAgency adlı üyeden alıntı: mesajı görüntüle

Herhangi bir hata alıyormusunuz? Ek olarak js kodunuz <head> bölümünde veya <body> bölümünde ekli şekilde değil mi?

hayır hata almıyorum, js kodları head arasında ekli ilk mesajımda html sayfanın tamamını paylaştığım şekilde.