Button onClick handler runs multiple times

Viewed 29

I am trying to create a date range calender in Wix based on a Javascript class structure. I almost have everything working the way it should, but for some reason every time I click a button the amount of times the onClick handler runs is doubled. (I.E. The first time I click a button the relevant function will be run once. The second time it will run twice. Third time it runs 4, then 8, then 16 and so on.)

I am making a few callback function calls inside the function that is run onClick. I think that might be the cause of the issue, but I am not fully sure that it is and if so, I am not sure how to change the way the program operates while keeping my code DRY.

Here is the selectDate function that fires onClick:

    export async function selectDate(date, id) {
    console.log("clicked")
    const dates = await calender.pickDate(date)
    if(dates.checkIn && dates.checkOut) {
        $w("#text18").text = `${dates.checkIn} - ${dates.checkOut}`
        $w("#group1").hide("slide", {"direction": "top", "duration": 500})
        timeline.reverse()
        const newDates = await calender.renderCalender()
        await refreshCalender(newDates)
    } else if(dates.message) {
        const newDates = await calender.renderCalender()
        await refreshCalender(newDates)
    } else {
        const newDates = await calender.renderCalender()
        await refreshCalender(newDates)
        $w(`#${id}`).style.backgroundColor = "#0E1F58"
        $w(`#${id}`).style.color = "#FFFFFF"
        $w(`#${id}`).style.borderColor = "#ffba00"
        $w(`#${id}`).onMouseIn(() => $w(`#${id}`).style.backgroundColor = "#0E1F58")
        $w(`#${id}`).onMouseOut(() => {
            $w(`#${id}`).style.backgroundColor = "#0E1F58"
            $w(`#${id}`).style.color = "#FFF"
        })
        if(Number(id) + 7 < 38) {
            for(let i = 1; i < 8; i++) {
                let button = $w(`#${Number(id) + i}`)
                button.style.backgroundColor = "#BBC8F4"
                i === 3 || i === 4 || i === 7 ? button.style.borderColor = "#ffba00" : ""
            }
        }
    }
    return
}

Here is the renderCalender function that is part of the Javascript Class. It essentially just creates a date array:

renderCalender() {
        let date =  new Date(this.date)
        let calenderDays = []
        let dayOfTheWeek = date.getDay()
        let countForeward = 0
        let countBackwards = dayOfTheWeek
        for(let i = 0; i <= 38; i++) {
            let day = new Date(date)
            if(countBackwards >= 0) {
                calenderDays.push(new Date(day.setDate(day.getDate() - countBackwards)))
                countBackwards--
            } else {
                countForeward ++
                calenderDays.push(new Date(day.setDate(day.getDate() + countForeward)))
            }
        }
        return calenderDays
    }

Finally here is the refresh calender function. This just takes the date array and assigns the dates to the calendar buttons in order.

export function refreshCalender(dates) {
    console.log(dates)
    for(let i = 0; i < dates.length; i++) {
        let button = $w(`#${i}`)
        let current = dates[i]
        button.label = (current.getDate()).toString()
        if(current.getMonth() <= currentDate.getMonth() && current.getFullYear() <= currentDate.getFullYear() && currentDate.getTime() >= current.getTime()) {
            button.disable()
        } else {
            button.enable()
            button.style.color = "#0E1F58"
            button.style.backgroundColor = "#FFFFFF"
            button.style.borderColor = current.getMonth() === calender.date.getMonth() ? "#000000" : "#B0AAA9"
            button.onClick(() => selectDate(current, button.id)) 
            button.onMouseIn(() => {
                button.style.backgroundColor = "#0E1F58"
                button.style.color = "#FFFFFF"
            })
            button.onMouseOut(() => {
                button.style.backgroundColor = "#FFFFFF"
                button.style.color = "#0E1F58"
            })
        }
    }
    return null
}

Any help or advice on this issue would be greatly appreciated. If you would like me to share the website URL I can do that as well. Thank you!

0 Answers
Related