Can someone help me to change the image by the index in Javascript?

Question:

I'm trying to change the image as the value of the variable num changes. For example, from 0 to 100 is one image, from 101 to 200 is another, and so on.

I put any number from 0 to 100 and it returns the image of index 0, I put any number from 101 to 200 and it correctly returns the image of index 1, but from 201 upwards the image does not change and it continues to show the index image 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];
    }
}

in html it is like this

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

Answer:

The problem there is you are using a || (OR) instead of a && (AND).

As 400 is greater than 101 then the condition:

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

is always true. if you move to

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

in this and the following conditions it should already work.

Scroll to Top