undo the click event when selecting the next item

Asked

Viewed 57 times

1

I have four functions that do the same thing, an image exchange at the click event. My question is, how do I get the previous item back to the image it was before when I click on the next?

    function mudaImagem() {
    var imgA = "https://danielelima.com.br/files/giiiiiii.gif";
    var imgA2 = "https://danielelima.com.br/files/elipse-1.png";
    var img = document.getElementById('imagem01');
    img.src = (img.src == imgA ? imgA2 : imgA);
}

document.getElementById('imagem01').addEventListener('click', mudaImagem, true);


function mudaImagem2() {
    var imgB = "https://danielelima.com.br/files/giiiiiii2.gif";
    var imgB2 = "https://danielelima.com.br/files/elipse-2.png";
    var img = document.getElementById('imagem02');
    img.src = (img.src == imgB2 ? imgB : imgB2);
}

document.getElementById('imagem02').addEventListener('click', mudaImagem2, true);

function mudaImagem3() {
    var imgC = "https://danielelima.com.br/files/giiiiiii3.gif";
    var imgC2 = "https://danielelima.com.br/files/elipse-3.png";
    var img = document.getElementById('imagem03');
    img.src = (img.src == imgC2 ? imgC : imgC2);
}

document.getElementById('imagem03').addEventListener('click', mudaImagem3, true);

function mudaImagem4() {
    var imgD = "https://danielelima.com.br/files/giiiiiii4.gif";
    var imgD2 = "https://danielelima.com.br/files/elipse-4.png";
    var img = document.getElementById('imagem04');
    img.src = (img.src == imgD2 ? imgD : imgD2);
}

document.getElementById('imagem04').addEventListener('click', mudaImagem4, true);

My html

    <ul class="nav nav-tabs justify-content-center" role="tablist">
        <li class="nav-item">
            <a href="#um" class="nav-link active" data-toggle="tab">
                <img id="imagem01" class="img-fluid" src="https://danielelima.com.br/files/elipse-1.png" width="104px" alt="01" title="01">
            </a>
        </li>

        <li class="nav-item">
            <a href="#dois" class="nav-link" data-toggle="tab">
                <img id="imagem02" class="img-fluid mobile" src="https://danielelima.com.br/files/giiiiiii2.gif" alt="02" width="104px" title="02">
            </a>
        </li>
        <li class="nav-item">
            <a href="#tres" class="nav-link" data-toggle="tab">
                <img id="imagem03" class="img-fluid" src="https://danielelima.com.br/files/giiiiiii3.gif" alt="03" width="104px">
            </a>
        </li>
        <li class="nav-item">
            <a href="#quatro" class="nav-link" data-toggle="tab">
                <img id="imagem04" class="img-fluid" src="https://danielelima.com.br/files/giiiiiii4.gif" alt="04" width="104px">
            </a>
        </li>
    </ul>
javascript html5

2 answers

2

Suggested code organization based on what was sent. This way it becomes much easier for you to change the image that is selected and your code becomes more cohesive.

let imagens = [
    {
        imgPrincipal: "https://danielelima.com.br/files/giiiiiii.gif",
        imgSecundaria: "https://danielelima.com.br/files/giiiiiii.gif",
        element: 'imagem01'
    },
    {
        imgPrincipal: "https://danielelima.com.br/files/giiiiiii2.gif",
        imgSecundaria: "https://danielelima.com.br/files/elipse-2.png",
        element: 'imagem02'
    },
    {
        imgPrincipal: "https://danielelima.com.br/files/giiiiiii3.gif",
        imgSecundaria: "https://danielelima.com.br/files/elipse-3.png",
        element: 'imagem04'
    },
    {
        imgPrincipal: "https://danielelima.com.br/files/giiiiiii4.gif",
        imgSecundaria: "https://danielelima.com.br/files/elipse-4.png",
        element: 'imagem04'
    },
];

imagens.forEach(() => {
    escutaClick()
});

function escutaClick(){
    // faça aqui o escutador
}

// indica quando será a primeira imagem
let numeroAtual = 0;

function mudaImagem(numeroAtual){
    // faça aqui a alteração na imagem
}

  • thank you very much friend! More as I’m still learning I was left with the following doubts, how would this function listenClick and the changeImage, I made a few attempts here but it didn’t work!

  • 2

    Without the HMTL part, it’s hard for me to implement code for you. But basically, you have to do a foreach to add the addeventlistener. In the change image function, you need to change the number that is active and scroll through the array to know which element to display. This way it is much easier to add new images, for example, without repeating so much code.

  • 1

    I’ll put my html in the code so you can see how it is!

1

I always choose not to publish code so I put only one step, I’m not sure if that was the result

 <ul class="nav nav-tabs justify-content-center" role="tablist">
        <li class="nav-item">
            <a href="#um" class="nav-link active imagens" data-toggle="tab">
                <img id="imagem" class="img-fluid" src="https://danielelima.com.br/files/elipse-1.png" width="104px" alt="01" title="01">
            </a>
        </li>
        <button onclick="voltar()">Voltar</button>
        <button onclick="avancar()">Avançar</button>
    </ul>

Array with the list of all images

let imagens = [
    {
        imgPrincipal: "https://danielelima.com.br/files/giiiiiii.gif",
        imgSecundaria: "https://danielelima.com.br/files/giiiiiii.gif",
    },
    {
        imgPrincipal: "https://danielelima.com.br/files/giiiiiii2.gif",
        imgSecundaria: "https://danielelima.com.br/files/elipse-2.png",
    },
    {
        imgPrincipal: "https://danielelima.com.br/files/giiiiiii3.gif",
        imgSecundaria: "https://danielelima.com.br/files/elipse-3.png",
    },
    {
        imgPrincipal: "https://danielelima.com.br/files/giiiiiii4.gif",
        imgSecundaria: "https://danielelima.com.br/files/elipse-4.png",
    },
];

functions to change the image

let numeroAtual = 0;

function voltar(){
    if(numeroAtual < 0){
        numeroAtual = 0;
    } else {
        numeroAtual--
    }
    mudaImagem();
}

function avancar(){
    if(numeroAtual === imagens.length - 1){
        numeroAtual = 0;
    } else {
        numeroAtual++
    }
    mudaImagem();
}

function mudaImagem(){
    let imagemTag = document.getElementById('imagem');
    imagemTag.setAttribute('src', imagens[numeroAtual].imgPrincipal)
}

  • Hey @Felipemeida I understood your logic and it really became much more cohesive the code, so there will not be a forward and back button, the event has to occur in the images themselves, understanding: we will have image 1, 2, 3 and 4, when I click on image 2 it changes to another image, If I click on image 3, image 2 should go back to normal for the image that was before. Then this functionality should work on all others, because the intention is to INDICATE WHICH MENU IS SELECTED.

Browser other questions tagged javascript html5

You are not signed in. Login or sign up in order to post.