Boa noite ! Estou tentando fazer com que quando a força chegue no 1000 apareça nem que seja um alert . Mas não estou conseguindo. Exemplo:
const forca = document.querySelector("#forca");
if (forca.textContent > 1000) { alert("Uau! Seu poder já passou de 1000"); }
Tentei fazer de algumas outras formas mas sem sucesso. Alguém consegue me dar um help nessa bobagem ?
Oi, Rodrigo
Como está o se código completo? Use:
Arquivo js separado chamado "joker":
const forca = document.querySelector("#forca-alert");
if (forca.textContent > 1000) { alert("Uau! Seu poder já passou de 1000"); }
index.html :
<body>
<main>
<section class="robotron">
<img class="robo" src="img/robotron.png" alt="Robotron" id="robotron">
<figcaption class="titulo">ROBODRIGO <br>1996</figcaption>
</section>
<section class="box estatisticas">
<div class="estatistica">
<p class="estatistica-titulo">Força</p>
<div class="estatistica-valor">
<p class="estatistica-numero" data-estatistica="forca" id="forca-alert">768</p>
</div>
</div>
<div class="estatistica">
<p class="estatistica-titulo">Poder</p>
<div class="estatistica-valor">
<p class="estatistica-numero" data-estatistica="poder">30</p>
</div>
</div>
<div class="estatistica">
<p class="estatistica-titulo">Energia</p>
<div class="estatistica-valor">
<p class="estatistica-numero" data-estatistica="energia">289</p>
</div>
</div>
<div class="estatistica">
<p class="estatistica-titulo">Velocidade</p>
<div class="estatistica-valor">
<p class="estatistica-numero" data-estatistica="velocidade">597</p>
</div>
</div>
</section>
<section class="equipamentos">
<form action="" class="montador">
<div class="box montador-conteudo">
<div class="peca">
<label for="" class="peca-titulo">Braços</label>
<div class="controle">
<buttom class="controle-ajuste" id="subtrair" data-controle="-" data-peca="bracos">-</buttom>
<input type="text" class="controle-contador" value="00" data-contador>
<buttom class="controle-ajuste" id="somar" data-controle="+" data-peca="bracos">+</buttom>
</div>
</div>
<hr class="linha">
<div class="peca">
<label for="" class="peca-titulo">Blindagem</label>
<div class="controle">
<buttom class="controle-ajuste" id="subtrair" data-controle="-" data-peca="blindagem">-</buttom>
<input type="text" class="controle-contador" value="00" data-contador>
<buttom class="controle-ajuste" data-controle="+" data-peca="blindagem">+</buttom>
</div>
</div>
<hr class="linha">
<div class="peca">
<label for="" class="peca-titulo">Núcleos</label>
<div class="controle">
<buttom class="controle-ajuste" id="subtrair" data-controle="-" data-peca="nucleos">-</buttom>
<input type="text" class="controle-contador" value="00" data-contador>
<buttom class="controle-ajuste" data-controle="+" data-peca="nucleos">+</buttom>
</div>
</div>
<hr class="linha">
<div class="peca">
<label for="" class="peca-titulo">Pernas</label>
<div class="controle">
<buttom class="controle-ajuste" id="subtrair" data-controle="-" data-peca="pernas">-</buttom>
<input type="text" class="controle-contador" value="00" data-contador>
<buttom class="controle-ajuste" data-controle="+" data-peca="pernas">+</buttom>
</div>
</div>
<hr class="linha">
<div class="peca">
<label for="" class="peca-titulo">Foguetes</label>
<div class="controle">
<buttom class="controle-ajuste" id="subtrair" data-controle="-" data-peca="foguetes">-</buttom>
<input type="text" class="controle-contador" value="00" data-contador>
<buttom class="controle-ajuste" data-controle="+" data-pecas="controle">+</buttom>
</div>
</div>
</div>
<input type="submit" value="Iniciar produção" class="botao" id="producao">
</form>
</section>
</main>
<script src="js/main.js"></script>
<script src="js/joker.js"></script>
</body>
</html>
O "if" só só será verificado no carregamento "joker.js"
Uma solução seria colocar dentro do "setInterval" com loop de 1 segundo
const forca = document.querySelector("#forca-alert");
setInterval( function() {
if (forca.textContent > 1000) {
alert("Uau! Seu poder alcançou 1000");
forca.textContent = 1000;
}
}, 1000)
Fazendo para todos
const estatisticas = document.querySelectorAll('[data-estatística]'); // não repita a const se vc já tive no mais.js
setInterval(function () {
estatisticas.forEach(estatistica => {
if (estatistica.textContent > 1000) {
alert(`Uau! ${estatistica.dataset.estatistica.toUpperCase()} alcançou 1000`);
estatistica.textContent = 1000;
}
})
}, 1000)
O melhor seria usar na função q altera as estatísticas, mas eu não sei como está seu código "main.js"