0

Tenho a seguinte situação: um html e dentro desse html uma DIV, estou incluindo via js 3 imagens nessa div com innerHTML (como um Carrossel) que mudam de acordo com o botão e a posição deles no array, porém, a função executada no click para ao encontrar um objeto que carregue uma tag com imagem.

Onde no código está o objeto firstImage, se eu trocasse para "a", por exemplo, o código funcionaria normalmente, mas se coloco o objeto ele para ao exibi-lo.

Não sei o porquê disso ocorrer, alguém saberia me dizer? caso falte alguma informação é só dizer.

const Slider = () => {
    
        const slider = document.querySelector ('[data-slider__conteudo]');
    
        const botaoEsquerdo = document.querySelector ('[data-botao__esquerdo]')
        const botaoDireito = document.querySelector ('[data-botao__direito]')
    
        
        
    
        const lista = [ firstImage, `b`, `c`];
    
      
        slider.innerHTML = lista[1];
    
         botaoEsquerdo.addEventListener ('click', tarefaBotaoEsquerdo);
        
        
        
          function tarefaBotaoEsquerdo () {
    
           
                if (slider.innerHTML == lista [0]) {
            
            
                        lista.map ((item) => {
            
                            
            
            
                            slider.innerHTML = lista[2];
                            
            
                        
            
                        });
                    
                } else if (slider.innerHTML == lista [2]) {
            
                        lista.map ((item) => {
            
                            
            
            
                            slider.innerHTML = lista[1];
                            
            
                        
            
                        });
            
            
                    
                    } else {
                        lista.map ((item) => {
            
                            
            
            
                            slider.innerHTML = lista[0];
                            
            
                        
            
                        });
            
                    }   
            
                
        
        }
        
    
    
        
    
    
    
          
    }

const firstImage = `<a href="/"> 
<img src="./assets/IMG/img1.png" alt="" class="image1 slider__image" >
</a>`;
1
  • Não faça cumprimento e nem use agradecimentos nas publicações. Commented 13/07/2021 às 4:49

1 Resposta 1

0

Caso alguem esbarre nessa pergunta, descobri o problema:

haviam espaços dentro do valor da template string, por esse motivo dava problema na execução:

firstImage = <a href="/"> <img src="./assets/IMG/img1.png" alt="" class="image1 slider__image" > </a>;

funcionou após:

firstImage = <a href="/"> <img src="./assets/IMG/img1.png" alt="" class="image1 slider__image"></a>;

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 .