setInterval() I’m not getting it to work

Asked

Viewed 50 times

-2

I’m not getting to put the time because I created a Carousel and wanted to put a 4 seconds interval for iteration .

<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Document</title>
  </head>
  <body>
    <div class="container">
      <div class="wall wall-1" id="wall-1">
        <a href="#wall-3">Voltar</a>
        <h1>carrosel numero - 1</h1>
        <a href="#wall-2">Avançar</a>
      </div>

      <div class="wall wall-2" id="wall-2">
        <a href="#wall-1">Voltar</a>
        <h1>carrosel numero - 2</h1>
        <a href="#wall-3">Avançar</a>
      </div>

      <div class="wall wall-3" id="wall-3">
        <a href="#wall-2">Voltar</a>
        <h1>carrosel numero - 3</h1>
        <a href="#wall-1">Avançar</a>
      </div>
    </div>
    <script>
      document.location = "#wall-1";
      var x = 1;
      setInterval(function () {
        x++;
        document.querySelector("#wall-1").id = "#wall-1" + x;
        if (x == "#wall-3") {
          clearInterval();
        }
      }, 4000);
    </script>
  </body>
</html>

this error appears Uncaught Typeerror: Cannot set Property 'id' of null at index.html:34


.container {
  width: 150px;
  height: 150px;
}

.wall {
  display: none;
  width: 100%;
  height: 100%;
}

/* Corzinha de fundo para diferenciar */
.wall-1 {
  background-color: #f00;
}
.wall-2 {
  background-color: #0f0;
}
.wall-3 {
  background-color: #00f;
}

.wall:target {
  display: block;
}

CSS code showing the Carousel

javascript html5 css3 javascript-events

  • on the case as I would put .

  • This line 34 that refers to the id error not found would be which part exactly there of the script?

  • would be that part declared Document.querySelector("#Wall-1"). id = "#Wall-1" + x;

  • Take a table test. The first time you run your function, you look for an element with the id wall-1, then you concatenate x in the id of that element, resulting in the id wall-12. The second time you run the function, you search again for the id wall-1, but this id no longer exists, it was changed, so the error.

  • I put Wall- without number but also did not work

  • in case I had gone by that logic

Show 1 more comment

1 answer

1


You got two problems there

  1. The interval of the first call it points correctly to the #Wall-1
document.querySelector("#wall-1").id // Te da o valor de: wall-1
document.querySelector("#wall-1").id = "#wall-1" + x 
// Seria wall-1 recebe "wall-1" + 1
// Então estaria id="#wall-11" assim te retornando o erro que não conseguiu obter id de núlo

Then on the second call he’d be like this

wall-1 = "#wall-1" + 1 // o seu id estaria como id="#wall-11"

Thus not even getting to #Wall-2, as you are assigning a string to a number
not to mention that the # goes together in the id="#..."

And it wouldn’t make much sense for you to try to assign existing ID to another element either..

document.location = "#wall-1";
      var atual = 1;
      setInterval(function () {
        atual++;
        let id = document.querySelector(`#wall-${atual}`).id // id == wall-2, na prox chamada id será wall-3, etc...
        if (atual == 3) {
          clearInterval();
        }
      }, 4000);

This way it enters the range, adds +1 to the current being == 2

It’s really bad that you do this with Pure Javascript, unless you’re still learning, try starting with Jquery[1], and practical will give you a help with animations/DOM in JS.

Browser other questions tagged javascript html5 css3 javascript-events

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