4

Eu estou tentando ir mudando a imagem conforme o valor da variavel num muda. Por exemplo, de 0 a 100 é uma imagem, de 101 a 200 é outra e assim sucessivamente.

Eu coloco qualquer numero de 0 a 100 e ele me retorna a imagem do indice 0, coloco qualquer numero de 101 a 200 e me retorna corretamente a imagem do indice 1, porem de 201 pra cima as imagem nao alteram e continua mostrando a do indice 1.

var num = 568
var fotos = ["./img/Emblem_Iron.png", "./img/Emblem_Bronze.png", "./img/Emblem_Silver.png", "./img/Emblem_Gold.png", "./img/Emblem_Platinum.png", "./img/Emblem_Diamond.png", "./img/Emblem_Master.png", "./img/Emblem_Grandmaster.png", "./img/Emblem_Challenger.png"];
function alterarImagem() {
    if (num <= 100) {
        document.getElementById("img").src = fotos[0];
    } else if (num >= 101 || num <= 200) {
        document.getElementById("img").src = fotos[1];
    } else if (num >= 201 || num <= 300) {
        document.getElementById("img").src = fotos[2];
    } else if (num >= 301 || num <= 400) {
        document.getElementById("img").src = fotos[3];
    } else if (num >= 401 || num <= 500) {
        document.getElementById("img").src = fotos[4];
    } else if (num >= 501 || num <= 600) {
        document.getElementById("img").src = fotos[5];
    } else if (num >= 601 || num <= 700) {
        document.getElementById("img").src = fotos[6];
    } else if (num >= 701 || num <= 800) {
        document.getElementById("img").src = fotos[7];
    } else {
        document.getElementById("img").src = fotos[8];
    }
}

no html está assim

<img id="img" src="./img/Emblem_Iron.png" class="elo">
button id="btn" class="play" onclick="alterarImagem(400)">test</button>

2 Respostas 2

7

O problema aí é estás a usar um || (OU) em vez de um && (E).

Como 400 é maior que 101 logo a condição:

if (num >= 101 || num <= 200)

é sempre verdadeira. Se mudares para

if (num >= 101 && num <= 200)

nesta e nas condições seguintes já deverá funcionar.

1
  • 1
    Funcionou! eu sou novo em javascript, nao sabia muito desses detalhes! MUITO OBRIGADO!
    – Asp3cTy
    Commented 14/01/2020 às 14:59
4

Se você utiliza || (ou) como condição, logo, ele não vai confirmar as duas condições, porque uma delas já é satisfatória.

Por exemplo:

205 é maior que 100, então, não precisa que eu confirme se é menor que 200, pois:

OU é maior que 100, OU é menor que 200. Entendeu?

Troca os || por &&, que o seu problema resolve.

Abs!

1
  • 1
    Funcionou! eu sou novo em javascript, nao sabia muito desses detalhes! MUITO OBRIGADO!
    – Asp3cTy
    Commented 14/01/2020 às 14:59

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .