I have created a menu bar that is always at the bottom of the screen (it is a web block). I want the user to get some sort of feedback that they clicked on an icon, so I want to change the color of the black icon to white. I could do this with JavaScript with normal icons that are not tied to a link. But in this case, the user clicks on the link and not the icon, and my code doesn't work.
The code:
var link = document.querySelector('.fake-link');
if (link) {
link.addEventListener('click', function () {
var icon = link.querySelector('.icon-link');
if (icon) {
icon.style.color = '#fff';
}
});
}Fake-link is the class I created for the link. Icon-link is the icon's class.
Hello @shooouse ,
I tried to replicate the issue with your JS code. In my case, the icon's colour changed as expected. It seems like some other style property or class is causing the issue. Could you please verify it and provide your code here to investigate further?
Link: https://personal-bknrmxur.outsystemscloud.com/Demo_UI/Home
You're right, I defined the color in the style properties before, which overrode the whole thing.... Thank you for bringing this to my attention!
Hi @shooouse please try below JavaScript with your code
const menuIcons = document.querySelectorAll('.menuIcon');
menuIcons.forEach((menuIcon) => {
menuIcon.addEventListener('click', () => {
if (menuIcon.classList.contains('clicked')) {
menuIcon.classList.remove('clicked');
} else {
menuIcon.classList.add('clicked');
Could you please explain a bit? Is it tied to the link?