3
respostas

Estatísticas sendo alteradas mesmo quando o valor está em 0

Olá pessoal,

Estou tendo algumas dificuldades para consertar um erro no meu projeto. Quando clico no botão "-", o contador não muda para menos de 0, o que está correto, mas as estatísticas do robô estão sendo afetadas. Por exemplo, mesmo que o robô esteja com 0 braços, as estatísticas como energia e velocidade estão mudando a cada vez que clico no botão "-".

Além disso, notei que quando adiciono características ao robô, as estatísticas são atualizadas corretamente, mas quando zero tudo, elas não voltam para o valor inicial.

Gostaria de pedir ajuda para tentar solucionar esses problemas. Desde já agradeço a todos!

https://github.com/joycelemos73/Alura-FrontEnd/tree/master/AplicacoesWebComJavascript/02_ManipulandoDOM

3 respostas

Opa Joyce, tudo bem?

Primeiramente gostaria de parabenizar seu código, gostei de como decidiu resumir seu código em constantes.

Para que o código funcione como desejado, analisaremos principalmente a função atualizaEstatisticas().

Nessa função, nota-se que está usando como parâmetros das suas condições um resumo de equações futuras (constantes), porém dessa forma não analisaremos na integra o valor atual utilizado e sim uma métrica de uma soma ou subtração.

if(operacao === "-"){
    if(subtraiEstatistica >= 0){

Sendo assim, podemos utilizar do valor atual das nossas estatísticas por uma informação já usada anteriormente, o data attribute. Para isso podemos reutilizar o data-contador, criando e armazenando esse valor em uma constante:

const contador = document.querySelector('[data-contador]');  

Além do uso dessa nova constante, precisamos refatorar as nossas condições, simplificando o sistema de modo que se adeque ao nosso contador. Para isso, primeiro substituiremos os valores que usamos como parâmetros de subtração e soma para o valor do contador. Além disso, modificaremos a nossa condição para verificar se o valor da variável "contador" é igual à string '0':

if (operacao === '-'){
    if(contador.value === '0'){

    }
}

Assim podemos definir que enquanto o valor permanecer em 0 não haverá mudanças, caso isso não seja verdade queremos subtrair os valores:

if(contador.value === '0'){

}else{
      elemento.textContent = subtraiEstatistica;           
}

Por fim, usamos caso um botão diferente do subtração seja apertado, podemos usar um else para indicar a soma :

if (operacao === '-'){    
}else{
   elemento.textContent = somaEstatistica
}

Prontinho! Assim conseguiremos evitar que os valores diminuam com a subtração mesmo com o valor 0. O nosso código completo vai ficar da seguinte maneira:

function atualizaEstatisticas(peca, operacao) {
    const contador = document.querySelector('[data-contador]');  
    estatisticas.forEach( (elemento) => {
        const estatisticaAtual = parseInt(elemento.textContent);
        const somaEstatistica = estatisticaAtual + pecas[peca][elemento.dataset.estatistica];
        const subtraiEstatistica = estatisticaAtual - pecas[peca][elemento.dataset.estatistica];
                if (operacao === '-'){    
                        if(contador.value === '0'){

                        }else{
                              elemento.textContent = subtraiEstatistica;           
                        }
                }else{
                   elemento.textContent = somaEstatistica
                }
        })
}

Se precisar de ajuda ou tiver alguma dúvida, estou à disposição, conte comigo!

Um bom dia e bons estudos

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓

Olá Joyce,

Para evitar repetições e muitos "ifs", use a seguinte lógica:

function addListener(selector, valueChange, targetSelector) {
  document.querySelector(selector).addEventListener('click', function (e) {
    e.preventDefault();
    const currentValue = parseInt(document.querySelector(targetSelector).value);
    document.querySelector(targetSelector).value = currentValue + valueChange;
  });
}

addListener("#armsControlMinus", -1, "#arms");
addListener("#armsControlPlus", 1, "#arms");
addListener("#shieldControlMinus", -1, "#shield");
addListener("#shieldControlPlus", 1, "#shield");
addListener("#coreControlMinus", -1, "#core");
addListener("#coreControlPlus", 1, "#core");
addListener("#legsControlMinus", -1, "#legs");
addListener("#legsControlPlus", 1, "#legs");
addListener("#rocketsControlMinus", -1, "#rockets");
addListener("#rocketsControlPlus", 1, "#rockets");

document.getElementsByClassName('robo')
    .item(0)
    .addEventListener('click', function (e) {
      alert("Ola! ");
});

document.getElementsByClassName("montador").item(0).addEventListener('submit', function (e) {
    e.preventDefault();
    let armsValue = parseInt(document.querySelector("#arms").value);
    let shieldValue = parseInt(document.querySelector("#shield").value);
    let coreValue = parseInt(document.querySelector("#core").value);
    let legsValue = parseInt(document.querySelector("#legs").value);
    let rocketsValue = parseInt(document.querySelector("#rockets").value);

    document.querySelector("#speed").innerText = parseInt(document.querySelector("#speed").textContent) + legsValue + rocketsValue;
    document.querySelector("#force").innerText = parseInt(document.querySelector("#force").textContent) + armsValue;
    document.querySelector("#energy").innerText = parseInt(document.querySelector("#energy").textContent) + coreValue + shieldValue;
    document.querySelector("#power").innerText = parseInt(document.querySelector("#power").textContent) + shieldValue;

    alert("O Robô foi atualizado!")
});

Perceba que ids foram colocados no codigo HTML...

Desculpa, na mensagem anterior, nao havia visto seu repo github, testei seu código e fiz algumas modificações, ficou assim:

const controle = document.querySelectorAll("[data-controle]");
const estatisticas = document.querySelectorAll("[data-estatistica]");

const pecas = {
    "bracos": { "forca": 29, "poder": 35, "energia": -21, "velocidade": -5 },
    "blindagem": { "forca": 41, "poder": 20, "energia": 0, "velocidade": -20 },
    "nucleos": { "forca": 0, "poder": 7, "energia": 48, "velocidade": -24 },
    "pernas": { "forca": 27, "poder": 21, "energia": -32, "velocidade": 42 },
    "foguetes": { "forca": 0, "poder": 28, "energia": 0, "velocidade": -2 }
};

controle.forEach(elemento => {
    elemento.addEventListener("click", evento => {
        const controle = evento.target.parentNode;
        const peca = controle.querySelector('[data-contador]');
        manipulaDados(evento.target.dataset.controle, peca);
        atualizaEstatisticas(evento.target.dataset.peca, evento.target.dataset.controle, peca.value);
    });
});

const manipulaDados = (operacao, peca) => {
    peca.value = (operacao === "+") ? parseInt(peca.value) + 1 : (peca.value > 0) ? parseInt(peca.value) - 1 : peca.value;
};

const atualizaEstatisticas = (peca, operacao, counterValue) => {
    estatisticas.forEach(elemento => {
        const estatisticaAtual = parseInt(elemento.textContent);
        const estatistica = pecas[peca][elemento.dataset.estatistica];
        const somaEstatistica = estatisticaAtual + estatistica;
        const subtraiEstatistica = estatisticaAtual - estatistica;

        if ((operacao === "-" && counterValue > 0) || (operacao === "+" && counterValue >= 0)) {
            elemento.textContent = (operacao === "-") ? subtraiEstatistica : somaEstatistica;
        }
    });
};

Dessa forma, as estatísticas não sao atualizadas com valor zero.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software