Version 3.18.2 Bug – Can’t Change CSS Border Dynamically After Update
-
I recently updated my site from Elementor Version 3.17.3 to 3.18.2. After the update a piece of functionality on my site has broken. On the purchase page, when the user clicks a plan type a custom Javascript function changes the background color and the border to highlight the selected plan.
After updating Elementor to 3.18.2, the background color still changes as expected but the border color and thickness do not change. Trying to change the border properties manually when viewing page source in the browser has no effect either. I’m seeing the same issue on iOS and Mac in Chrome, Firefox, and Safari browsers.
Purchase page (v3.17.3): https://wallpunch.net/purchase/
Purchase page (v3.18.2): https://staging2.wallpunch.net/purchase/
Here is the Javascript code (saved in Pages -> Page Options -> Advanced Settings -> Custom JavaScript Code):
let monthPlan = document.getElementById("month-plan"); let quarterPlan = document.getElementById("quarter-plan"); let yearPlan = document.getElementById("year-plan"); monthPlan.addEventListener("click", e => selectPlan("month")); quarterPlan.addEventListener("click", e => selectPlan("quarter")); yearPlan.addEventListener("click", e => selectPlan("year")); let planDict = { "month": [monthPlan,2,1], "quarter": [quarterPlan,4,3], "year": [yearPlan,6,5] }; function selectPlan(plan) { Object.keys(planDict).forEach(k => { if (k === plan) { planDict[k][0].style.borderColor = "red"; planDict[k][0].style.borderWidth = "5px"; planDict[k][0].style.borderRadius = "50px"; planDict[k][0].style.background = "lightyellow"; planDict[k][0].style.cursor = "default"; } else { planDict[k][0].style.borderColor = "black"; planDict[k][0].style.borderWidth = "1px"; planDict[k][0].style.borderRadius = "50px"; planDict[k][0].style.background = "none"; planDict[k][0].style.cursor = "pointer"; } }) } selectPlan("year");
The topic ‘Version 3.18.2 Bug – Can’t Change CSS Border Dynamically After Update’ is closed to new replies.