JavaScript

Front-end JavaScript
#1

Sou iniciante e nao estou conseguindo localizar o meu erro ao criar um banner rotativo: pause e play nao funciona. Ocorre esse erro: Uncaught TypeError TypeError: Cannot set properties of null (setting ‘onclick’)

var imagens =[“img/destaque-home.png” , “img/destaque-home-2.png”];
var imagemAtual = 0;

function trocaImagem() {
imagemAtual = (imagemAtual + 1) % 2;
document.querySelector(’.destaque img’).src = imagens[imagemAtual];
}
var timer = setInterval(trocaImagem, 4000);
var controle = document.querySelector(’.pause’);

controle.onclick = function () {
if (controle.className === ‘pause’) {
clearInterval(timer);
controle.className = ‘play’;
}else {
timer = setInterval(trocaImagem, 4000);
controle.className = ‘pause’;
}
return false;
};


// html
Promoção
```
Erro JavaScript
#2

No HTML está class="pause play", então o valor de controle.className será inicialmente “pause play”. Por isso na primeira vez que clicar, ele cairá no else, e irá criar um novo timer (e a referência ao primeiro será perdida, por isso não será mais possível pausá-lo).

Então troque o HTML para ter apenas class="pause".

Eu também colocaria um texto no link, pois senão não dá pra saber onde é pra clicar:

<a href="#" class="pause">pause</a>

E no JavaScript você troca o texto junto com a classe:

controle.onclick = function() {
  if (controle.className === 'pause') {
    clearInterval(timer);
    controle.className = controle.innerText = 'play';
  } else {
    timer = setInterval(trocaImagem, 4000);
    controle.className = controle.innerText = 'pause';
  }
  return false;
};

Claro que daria pra fazer “firulas” (em vez do texto, colocar ícones de play e pause, etc), mas a ideia é essa.

Outra ideia é usar apenas uma classe que indica se o banner está rodando ou não:

<a href="#" class="playing">pause</a>

E no JavaScript, basta verificar se o elemento tem esta classe (e depois “invertê-la”):

var controle = document.querySelector('.playing');
controle.onclick = function() {
  if (controle.classList.contains('playing')) { // se está rodando, pausa
    clearInterval(timer);
    controle.innerText = 'play';
  } else { // se não está rodando, começa a rodar
    timer = setInterval(trocaImagem, 4000);
    controle.innerText = 'pause';
  }
  // muda o estado do banner
  controle.classList.toggle('playing');
  return false;
};

Ou seja, se está playing, eu pauso, senão eu começo outro timer. E no toggle faz a “inversão” (se tem a classe, remove, se não tem, adiciona).

#3

Desculpe me, mas não deu certo. Acredito que meu css pode ter influenciado voce pode verificar?.destaque{
margin-top: 10px;
position: relative;
}
.pause,
.play{
display: block;
position: absolute;
right: 500px;
top: 15px;
}
.pause{
border-left: 10px solid #900;
border-right: 10px solid #900;
height: 20px;
width: 50px;
}
.play{
border-left: 25px solid #900;
border-bottom: 15px solid transparent;
border-top: 15px solid transparent;

#4

Eu sugiro testar sem CSS primeiro (embora eu ache que não influencia em nada - não testei).

De qualquer forma, “não deu certo” é muito vago. O que acontece, que erro dá? Alguma mensagem no console? O que exatamente aconteceu, como vc testou? Etc etc

#5

A mensagem de erro que aparece :TypeError não capturado TypeError: Não é possível definir as propriedades de null (definindo ‘onclick’)

#6

Isso quer dizer que o querySelector não encontrou o elemento. Coloque o HTML e o JS atualizado, senão não tem como saber o que vc fez de errado.

#7

Hugo, boa tarde, agradeço pela sua atencao

Promoção var imagens =["img/destaque-home.png" , "img/destaque-home-2.png"]; var imagemAtual = 0;

function trocaImagem() {
imagemAtual = (imagemAtual + 1) % 2;
document.querySelector(’.destaque img’).src = imagens[imagemAtual];
}

var timer = setInterval(trocaImagem, 4000);

window.onload = function(){}
var controle = document.querySelector(’.pause’);

controle.onclick = function() {
if (controle.className === ‘pause’) {
clearInterval(timer);
controle.className = ‘play’;
}else {
timer = setInterval(trocaImagem, 4000);
controle.className = ‘pause’;
}

    return false;
};
#8

E o HTML? Provavelmente não encontrou esse elemento, verifique se há um elemento com a classe “pause”.