Strange behavior when I use addEventListener() on click. It only happens at mobile devices

Question

I'm gonna try to explain what is happening.

When I use a class "hide" as a display: none; to hide a button and show another button after click it works well in desktop browser, but when I tried the same thing at devices like iPhone, Tablets, etc. It has a strange behavior, after the second click, apparently it works ok, but the button don't change, it only changes when I click outside of it. If I don't do that looks like the button do not change. I have to click at the button one time to change them and apparently works, but the button only change when I click again outside it. It happens only in mobile devices.

I don't know what can I do to fix this in devices.

const buttonForest = document.querySelector(".button-forest");
const buttonForestSelected = document.querySelector(".button-forest-selected");

function forestButton() {
  buttonForest.classList.remove("hide");
  buttonForestSelected.classList.add("hide");
}

function forestButtonSelected() {
  buttonForest.classList.add("hide");
  buttonForestSelected.classList.remove("hide");
}

buttonForest.addEventListener("click", function() {
  forestButtonSelected();
});

buttonForestSelected.addEventListener("click", function() {
  forestButton();
});

:root {
  font-size: 62.5%;
}

main {
  display: flex;
  align-self: center;
  justify-self: center;
  padding: 5rem;
}

button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: end;
  justify-content: center;
}

.button-container {
  border: none;
  position: relative;
  display: flex;
  align-items: end;
  justify-content: center;
}

.icon-sound:hover .slider {
  background: white;
}

.icon-sound:hover .slider::-webkit-slider-thumb {
  background: white;
}

.icon-sound:hover .slider::-moz-range-thumb {
  background: white;
}

.button-container {
  border: none;
  position: relative;
  display: flex;
  align-items: end;
  justify-content: center;
}

.hide {
  display: none;
}

.icon-sound svg path {
  fill: #e1e1e6;
}

.icon-sound svg path+path {
  fill: #323238;
}

.icon-sound:hover .cor1 {
  fill: #02799d;
}

.icon-sound:hover .cor2 {
  fill: white;
}

#sounds {
  display: grid;
  grid-template-columns: auto auto;
  gap: 3.2rem;
  grid-template-areas: "item1 item2" "item3 item4";
}

.button-forest-selected .cor1 {
  fill: #02799d;
}

.button-forest-selected .cor2 {
  fill: white;
}

Strange behavior when I use addEventListener() on click. It only happens at mobile devices

Answers (0)

Related Questions