Şu JS Kodu Neden Sayfada Geçen İlk Class Haricindekilerde Çalışmıyor?

10-09-2022, 17:45:46

Aşağıdaki JS kodu site içi aramayı açıp kapatıyor ama sayfada 2 yerde .search-button butonu var, 1. çalışıyor 2. çalışıyor. Daha fazla eklersem onlarda çalışıyor. Bu kodun sayfadaki tüm .search-button içeren class'larda çalışmasını sağlayabilirim?

var wHeight = window.innerHeight;
var sb = document.querySelector(".search-button");
var closeSB = document.querySelector(".search-close");
var SearchOverlay = document.body;
var searchBar = document.querySelector(".search-bar");
// Show
searchBar.style.top=wHeight/2 +'px';
    console.log(wHeight);
    window.addEventListener("resize", function() {
        console.log(wHeight);
        wHeight = window.innerHeight;
        searchBar.style.top=wHeight/2 + 'px';
    }, true);
document.addEventListener("click", function() {
    sb.onclick = function() {
    console.log("Opened Search for Element: ");
    SearchOverlay.classList.add("show-search");
};
// Hide
closeSB.onclick = function() {
    console.log("Closed Search for Element: " + closeSB);
    SearchOverlay.classList.remove("show-search");
    };
}, true);

10-09-2022, 18:11:39

#2

Developer

querySelector ilk elementi seçer. querySelectorAll yaparak tüm elementleri seçebilirsiniz. Bunları daha sonra bir forEach döngüsü ile manipüle edebilirsiniz.

const sb = document.querySelectorAll(".search-button");
sb.forEach(item => {
     item.addEventListener("click", () => {})
})

10-09-2022, 18:31:26

#3

SkyGhostAir

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

querySelector ilk elementi seçer. querySelectorAll yaparak tüm elementleri seçebilirsiniz. Bunları daha sonra bir forEach döngüsü ile manipüle edebilirsiniz.

const sb = document.querySelectorAll(".search-button");
sb.forEach(item => {
     item.addEventListener("click", () => {})
})

querySelectorAll kullanmıştım önceden de çalışmadı nedense. Verdiğiniz kodu aşağıdaki gibi eklemem gerekiyor sanırım, çalışmadı butonların hiçbiri.

var wHeight = window.innerHeight;
const sb = document.querySelectorAll(".search-button");
sb.forEach(item => {
    item.addEventListener("click", () => {})
})
var closeSB = document.querySelector(".search-close");
var SearchOverlay = document.body;
var searchBar = document.querySelector(".search-bar");
// Show
searchBar.style.top=wHeight/2 +'px';
    console.log(wHeight);
    window.addEventListener("resize", function() {
        console.log(wHeight);
        wHeight = window.innerHeight;
        searchBar.style.top=wHeight/2 + 'px';
    }, true);
document.addEventListener("click", function() {
    sb.onclick = function() {
    console.log("Opened Search for Element: ");
    SearchOverlay.classList.add("show-search");
};
// Hide
closeSB.onclick = function() {
    console.log("Closed Search for Element: " + closeSB);
    SearchOverlay.classList.remove("show-search");
    };
}, true);

10-09-2022, 18:34:54

#4

Developer

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

querySelectorAll kullanmıştım önceden de çalışmadı nedense. Verdiğiniz kodu aşağıdaki gibi eklemem gerekiyor sanırım, çalışmadı butonların hiçbiri.

var wHeight = window.innerHeight;
const sb = document.querySelectorAll(".search-button");
sb.forEach(item => {
    item.addEventListener("click", () => {})
})
var closeSB = document.querySelector(".search-close");
var SearchOverlay = document.body;
var searchBar = document.querySelector(".search-bar");
// Show
searchBar.style.top=wHeight/2 +'px';
    console.log(wHeight);
    window.addEventListener("resize", function() {
        console.log(wHeight);
        wHeight = window.innerHeight;
        searchBar.style.top=wHeight/2 + 'px';
    }, true);
document.addEventListener("click", function() {
    sb.onclick = function() {
    console.log("Opened Search for Element: ");
    SearchOverlay.classList.add("show-search");
};
// Hide
closeSB.onclick = function() {
    console.log("Closed Search for Element: " + closeSB);
    SearchOverlay.classList.remove("show-search");
    };
}, true);

Yanlış yapıyorsunuz. Aşağıdaki gibi olacak:

const wHeight = window.innerHeight;
const closeSB = document.querySelector(".search-close");
const SearchOverlay = document.body;
const searchBar = document.querySelector(".search-bar");
// Show
searchBar.style.top=wHeight/2 +'px';
    console.log(wHeight);
    window.addEventListener("resize", function() {
        console.log(wHeight);
        wHeight = window.innerHeight;
        searchBar.style.top=wHeight/2 + 'px';
    }, true);

document.queySelectorAll(".search-button").forEach(item => {
     item.addEventListener('click', () => {
         console.log("Opened Search for Element: ");
         SearchOverlay.classList.add("show-search");
     })
})
// Hide
closeSB.onclick = function() {
    console.log("Closed Search for Element: " + closeSB);
    SearchOverlay.classList.remove("show-search");
    };
}, true);

10-09-2022, 18:55:46

#5

SkyGhostAir

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

Yanlış yapıyorsunuz. Aşağıdaki gibi olacak:

const wHeight = window.innerHeight;
const closeSB = document.querySelector(".search-close");
const SearchOverlay = document.body;
const searchBar = document.querySelector(".search-bar");
// Show
searchBar.style.top=wHeight/2 +'px';
    console.log(wHeight);
    window.addEventListener("resize", function() {
        console.log(wHeight);
        wHeight = window.innerHeight;
        searchBar.style.top=wHeight/2 + 'px';
    }, true);

document.queySelectorAll(".search-button").forEach(item => {
     item.addEventListener('click', () => {
         console.log("Opened Search for Element: ");
         SearchOverlay.classList.add("show-search");
     })
})
// Hide
closeSB.onclick = function() {
    console.log("Closed Search for Element: " + closeSB);
    SearchOverlay.classList.remove("show-search");
    };
}, true);

Yok hocam olmuyor. Birde kodda sorun var sanırım }) fazla mı ney editör kırmızı gösteriyor en sonu şu şekilde;

10-09-2022, 19:33:55

#6

Developer

Sondaki }, true); verisini silebilirsin. Bu arada compiler yoksa const olanları var olarak değiştirebilirsin. El alışkanlığı const yazıyorum ben.

11-09-2022, 18:20:27

#7

SkyGhostAir

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

Sondaki }, true); verisini silebilirsin. Bu arada compiler yoksa const olanları var olarak değiştirebilirsin. El alışkanlığı const yazıyorum ben.

Tamamdır, halloldu. Çalışan son hali şu şekilde;

var wHeight = window.innerHeight;
var sb = document.querySelectorAll(".search-button");
var closeSB = document.querySelector(".search-close");
var SearchOverlay = document.body;
var searchBar = document.querySelector(".search-bar");
// Show
searchBar.style.top=wHeight/2 +'px';
    console.log(wHeight);
    window.addEventListener("resize", function() {
        console.log(wHeight);
        wHeight = window.innerHeight;
        searchBar.style.top=wHeight/2 + 'px';
    }, true);
sb.forEach(sb => { 
    document.addEventListener("click", function() {
        sb.onclick = function() {
        console.log("Opened Search for Element: ");
        SearchOverlay.classList.add("show-search");
    };
});
// Hide
closeSB.onclick = function() {
    console.log("Closed Search for Element: " + closeSB);
    SearchOverlay.classList.remove("show-search");
    };
}, true);