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>