Em meu projeto, eu possuo funções bem parecidas, com a mesma intenção, porém, como se trata de uma função de troca de classes do DOM (classList.replace
), eu acabei fazendo um código muito repetitivo, e gostaria de reduzi-lo para torná-lo reutilizável no futuro. Porém, apesar de várias tentativas com loops como for...if
e forEach
, eu acabei travando, e por falta de experiência em lógica de programação, pois estudo programação a apenas 6 meses, não consegui.
Eis o código:
handleLeftAnswer() {
$leftDiv.classList.replace('leftside-div', 'leftside-div-js');
$centerDiv.classList.replace('centerside-div', 'centerside-div-js-no-display');
$rightDiv.classList.replace('rightside-div', 'rightside-div-js-no-display');
}
handleMidAnswer() {
$centerDiv.classList.replace('centerside-div', 'centerside-div-js');
$rightDiv.classList.replace('rightside-div', 'rightside-div-js-no-display');
$leftDiv.classList.replace('leftside-div', 'leftside-div-js-no-display');
}
handleRightAnswer() {
$rightDiv.classList.replace('rightside-div', 'rightside-div-js');
$centerDiv.classList.replace('centerside-div', 'centerside-div-js-no-display');
$leftDiv.classList.replace('leftside-div', 'leftside-div-js-no-display');
}
O que eu tentei:
handleRightAnswer(rightOne) {
const options = ['left', 'center', 'right'];
console.log(rightOne);
switch (rightOne) {
case rightOne: 'left'; break;
case rightOne: 'center'; break;
case rightOne: 'right'; break;
}
for (const option of options) {
const isThisTheRightAnswer = option === rightOne;
const element = document.querySelector(`.${option}side-div`);
console.log(element);
isThisTheRightAnswer ? element.classList.replace(`${option}side-div`, `${option}side-div-js`)
: element.classList.replace(`${option}side-div`, `${option}side-div-js-no-display`)
}
}
Quais os erros que deram nessa tentativa:
rightOne
estava voltando como ummouseEvent
- Os três elementos estavam atuando em conjunto e trocando suas classes de uma vez só, ao invés de separadamente.
isThisTheRightAnswer
estava retornando comofalse
, e eu não consegui decifrar como fazê-lo para retornartrue
.
Mais uma vez, me perdoem por minha ignorância e falta de prática, eu realmente gostaria de saber como posso trabalhar mais o meu raciocínio lógico para melhorar o meu código futuramente, e eu, um iniciante em programação, conto com a ajuda de vocês para me auxiliar nisso.